I’ve blogged about how great sorttable is before. I use it a lot in work and people love it. However, because of the way sort-table works normally it won’t work with tables that are not in the document when the onload event for the document triggers. What does that mean in real terms? It means that if you use AJAX to render a table it won’t be sortable even if you include the sorttable.js file and set the class of the table to sortable. A quick scan of the source code showed me the answer, you have to manually call the function sorttable.makeSortable() passing it the table you just got back from AJAX. The simplest way to do this is to give your table an ID and then use:

  1. sorttable.makeSortable(document.getElementById('the_table_id'));

Technorati Tags: , ,

Comments

29 Responses to “Making sorttable Work With AJAX”

  1. Stuart Langridge on May 19th, 2008 5:10 pm

    Absolutely. This is on my list for sorttable v3, too (see http://www.kryogenix.org/bugs/sorttable/ajax-tables.html in my bug list), just as soon as someone funds me to write it so I can take time away from paid work ;-)

  2. Ruben on August 12th, 2008 7:28 pm

    Where/when do you call this javascript line?
    After the ajax table is rendered I guess, but how would I do this?

  3. Bart B on August 12th, 2008 8:34 pm

    I call it in the same function I use to process the return from AJAX.

    Bart.

  4. Ruben on August 14th, 2008 8:45 am

    I’m using Cakephp 1.2 which has an AJAX class. Probably I need to call it there…are you using Cakephp too, by any chance?

  5. Bart B on August 14th, 2008 9:27 am

    Sorry Ruben, never even heard of it!

    Bart.

  6. Mike M on January 2nd, 2009 8:37 pm

    I am attempting to use makeSortable on a table that I am rendering in javascript as suggested and it works great in Mozilla/Firefox, but it doesn’t appear to work in Internet Explorer 7. The arrows change as if it registers the event but the rows do not update. Any suggestions?

    - Mike

  7. Bart B on January 3rd, 2009 1:42 am

    Sorry Mike, I’m afraid I only use FireFox … I’m lucky enough not to have to care about IE. I don’t suppose there is an error message you get get from somewhere?

    Bart.

  8. paulo on February 23rd, 2009 5:09 pm

    tnx for the tip, i got the script to work after calling it inside the ajax function. It works on IE but not on FireFox it totally disabled the ajax function from running. bummer. no errors.

  9. Andi on May 25th, 2009 7:33 am

    Hi Bart,
    could you please tell us more exactly how/where we have to put the js-line?

    Thanks!!! :)

  10. Pedro C on July 6th, 2009 2:22 pm

    I tried to making work the sortteable in ajax but i don’t have success please do you have a tutorial or tell me wher exactly do you call this javascript line

  11. Willi on July 26th, 2009 6:18 am

    In case the server/connection/client is slow: wait with sorting until everything is available

    setTimeout(“sorttable.makeSortable(document.getElementById(‘table_id’))”,1000);

    play around with the time setting

    finally this made sortable run with ajax

  12. Oscar Perez on August 29th, 2009 12:42 pm

    Gracias pana fue de mucha ayuda funciona perfectamente

  13. Yannick on November 4th, 2009 10:14 pm

    Thanks a lot for this post, has been a great help for me.

  14. Richie on April 2nd, 2010 10:49 am

    Really I can’t get this work , where script should be implemented? Any tips?

    I am kinda nooobie in javascript

  15. Nydiann on May 17th, 2010 2:12 pm

    Could you give a specific example how to implement it in the code?

  16. Quan on June 22nd, 2010 1:56 pm

    Thanks for the post…Just thought I’d comment since I finally got it working myself…

    //This is to set the sort table functions after ajax load…
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(OnEndRequest);

    function OnEndRequest(sender,args)
    {
    if (document.getElementById(“sorter”) != null)
    {
    sorttable.makeSortable(document.getElementById(“sorter”));
    }
    }

  17. Karthick on July 21st, 2010 6:47 pm

    I am still having trouble getting the AJAX returned table to be sortable. In my case, the table is generated in the AJAX referenced file and returned. So can someone please tell me where to include the

    sorttable.makeSortable(document.getElementById(‘the_table_id’));

    is it in the ajax referenced file or the main page (in my case .php file) that contains the AJAX script.

    I am totally new to AJAX and stuff. Any help will be greatly appreciated. Thanks a lot in advance for everyone’s help.

  18. Bart B on July 23rd, 2010 9:03 pm

    Karthick (and others) – I’ll try explain where it goes again.

    First thing to hammer home is that all JavaScript is executed on the client side, though the code is contained in the original page that is delivered to the user via PHP or what ever.

    So, the first thing that happens is that the user goes to your site and requests the main page, that request invokes some PHP code (or what ever) on the server which generates a bunch of HTML, CSS & JavaSript, and delivers it to the browser. The browser gets this HTML and renders it, with the help of the CSS, and then it runs the JavaScript. At some point the user will click something or do something that will call one of the JavaScript functions you delivered in the initial request. That function will then make another request to the server for more content (the AJAX request), and the server will return something to the client and trigger more JavaScript to actually DO something with what ever was returned. Normally that “something” is to insert the HTML code returned into the document somewhere. In this case, that function will write the HTML code for a table to some part of the document, and the HTML code for that table should give the table an ID. In the same function that writes the table to the document, you should call the code above, giving the ID of the table you added as the argument.

    I hope I’m not insulting anyone’s intelligence by spelling it out in such detail, but that’s the best I can do to try make it clear what needs to be done.

    Hope it helps people,

    Bart.

  19. Pimus on July 27th, 2010 1:53 pm

    this work fine.

  20. Pimus on July 27th, 2010 1:54 pm

    table id=mitab1 class=sortable
    onmouseover=sorttable.makeSortable(document.getElementById(mitab1));

  21. Deepti on July 28th, 2010 6:44 am

    thanks ..just what i was looking for

  22. bslintx on September 28th, 2010 6:14 am

    explanations are good and all…but to literally show WHERE to put within the ajax code would probably help considerably…

    after you draw the table created by the server side script…call the sortable javascript function

    everyone should have something similar to this in their ajax code:

    {
    if (http.readyState==4 || http.readyState==”complete”)
    {

    ajax.innerHTML = (http.responseText);
    sorttable.makeSortable(document.getElementById(‘tableidhere’));
    }
    }

    kudos to Bart for the fix!

  23. Matt on December 7th, 2010 2:26 am

    You have solved hours of headache and confusion. And for someone who is new to web programming I liked the breakdown of what was going on. Helped me figure out what I was doing wrong.
    Thanks!

  24. Manuel Lamiroy on March 10th, 2011 6:51 am

    I’m trying to use this with Prototype’s Ajax functions, but am not having any success with it.

    Adding the line within the Javascript function, after the line with the Ajax call, results in the Ajax call failing, i.e. the table doesn’t get generated.

    I tried passing it back from the called page as a Javascript instruction, but that didn’t work either…

    Any suggestions? Thanks.

  25. Shawna on May 9th, 2011 10:02 pm

    I am using makeSortable on my table. The sorting works great, but as soon as I sort, I lose the hyperlink associated with that row. Anyone know how I can fix this?

  26. David on November 28th, 2011 4:54 am

    I have been trying to get sorttable to work with an AJAX-generated table, using jQuery to handle the AJAX. I am loading sorttable.js with jQuery’s $.getScript method and calling sorttable.init() from within getScript’s callback function. I am putting the $.getScript code within the “success” option of jQuery’s $.ajax method. In doing this I’ve had to strip out all the calls to sorttable.init() from within sorttable.js. This approach seems to work in IE8 and Firefox 3.6.24 in so much as the script loads and the AJAX-generated table is sortable. I am however having a problem with some dates that appear in the table. I would be interested to hear if anyone else has tried using sorttable.js with jQuery and if so what their experiences have been. I am fairly new to jQuery/AJAX and am not at all confident that what I’m doing is good practice!

  27. Nando on February 2nd, 2012 8:13 pm

    Can’t thank you enough! I spent close to a week on this and even tapped my other resources (technical friends) to help me solve this.

    Thank you!

  28. venkat on June 27th, 2012 4:29 am

    I have written sorttable.makeSortable(‘table-name’).
    but i am getting an error: sorttable is not defined.
    i written the ajax function in another .js file.

  29. marra on July 26th, 2012 5:40 pm

    Great!! Thanks!!

Leave a Reply




Before you post a comment please remember that commenting on my blog is a privilege not a right. I won't approve comments that are obscene, offensive or insulting. For more info please read this post.

Subscribe without commenting