The Author – Bart Busschots
Creative Commons
Unless otherwise stated, the content on this site is licensed under Creative Commons Attribution, Noncommercial, No Derivative Works 3.0 License
May
19
Making sorttable Work With AJAX
Filed Under Computers & Tech, Software Development on May 19, 2008 at 1:43 pm
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:
sorttable.makesortable(document.getElementById('the_table_id'));
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 😉
Where/when do you call this javascript line?
After the ajax table is rendered I guess, but how would I do this?
I call it in the same function I use to process the return from AJAX.
Bart.
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?
Sorry Ruben, never even heard of it!
Bart.
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
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.
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.
Hi Bart,
could you please tell us more exactly how/where we have to put the js-line?
Thanks!!! 🙂
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
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
Gracias pana fue de mucha ayuda funciona perfectamente
Thanks a lot for this post, has been a great help for me.
Really I can’t get this work , where script should be implemented? Any tips?
I am kinda nooobie in javascript
Could you give a specific example how to implement it in the code?
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”));
}
}
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.
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.
this work fine.
table id=mitab1 class=sortable
onmouseover=sorttable.makeSortable(document.getElementById(mitab1));
thanks ..just what i was looking for
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!
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!
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.
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?
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!
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!
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.
Great!! Thanks!!
Thank you. This works great!
It’s worth to remember you must wait until the AJAX content is finished to call this function. Example:
$(“#tablediv”).load(document.location + ” #table”, function() {
sorttable.makeSortable(document.getElementById(‘table’));
});
jquery:
sorttable.makeSortable($(‘body’).find(“.sortable”).get(0));
i found this solution on stackoverflow. No need to give an id to the table and it will sort all sortable tables on the page.
For anyone still struggling with this, please note that there is an error in the blog post.
makeSortable should be makesortable (lowercase S!)
It took me a while to see it, but that’s all there was to it. Just run the code at the end of your AJAX stuff and make sure to use the lowercase “s”.
@JohnS – thanks for the correction, just fixed the typo, and while I was at it, the formatting too.