Reputation: 2679
I am using a jquery plugin found at:
I was able to get it to work on a static table. But now I am trying to get it to work on a table that is filled from a database with ajax. I feel am putting this code:
$(document).ready(function(){ $("#myTable").tablesorter(); } );
in the wrong spot. I just have it in Javascript tags at the top of the page. Since the table keeps getting refreshed I think I might need to call the above code again. Should it go in the ajax call or what?
Upvotes: 1
Views: 3758
Reputation: 69915
Yes, you should execute it inside the ajax success handler where you create the dynamic table. It is because jQuery should be able to find the element on the page before applying the plugin on it. Since you are creating it dynamically it will not find it if you execute the code on document
ready.
$.ajax(function(){
..
success: function(){
//Other code to create the dynamic table
$("#myTable").tablesorter();
}
..
});
Update:
If you are emptying the existing rows and just refreshing the same table with new rows(data) then you have to trigger update
event on the table.
$("myTable").trigger("update");
Upvotes: 3
Reputation: 22017
Check your plugin documentation, there's probably a way to re-sort it after the data has changed. This example might be what you're looking for. It creates the table sorter once, with empty data. When the data is inserted, it triggers an update using:
$("table").trigger("update");
This is the code you should use after each ajax call. Your original code should remain as it is (run it only once). The complete example would be something like:
$(document).ready(function(){
$("#myTable").tablesorter();
$.ajax(function(){
..
success: function(){
// Update your table data (remove and insert tr, tds etc)
$("#myTable").trigger("update");
// If your sorting conditions changed, use also:
$("#myTable").trigger("sorton",[sortingConditions]);
}
..
});
});
(Fragments of code copied from yours and ShankarSangoli's answers)
Upvotes: 1