hello i am having a problem with dynamically added rows to jquery tablesorter,
i have to add a row in the beginning of the table, by default the tablesorter works fine but after the row is added, the table sorted only sorts using the previous rows i mean that the new row is not included in the sorting process, the new row has some but not all fields blank any solution?
The tablesorter website offers details of how to do this, at: Appending table data with Ajax. The code is reproduced below:
$(document).ready(function() {
$("table").tablesorter();
$("#ajax-append").click(function() {
$.get("assets/ajax-content.html", function(html) {
// append the "ajax'd" data to the table body
$("table tbody").append(html);
// let the plugin know that we made a update
// updateAll ensures sorting is updated as well
$("table").trigger("updateAll");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2, 1], [0, 0]];
// sort on the first column
$("table").trigger("sorton", [sorting]);
});
return false;
});
});
$("table").trigger("update"); after adding content via ajax worked for me
You tried to unset the tablesorter and initialize a new tablesorter session?
Because the tablesorter dont know you added the new rows, so why not set a new tablesorter on the table.
The only way I could make it working was to regenerate whole table (remove it and then create again).
$(".resultTablePlaceholder").html('').html('<table id="resultTable">...</table>');
$("#resultTable").tablesorter();
These lines worked perfectly for me. After assigning HTML just trigger the update function of table.
$('#tblID').html(str);
$("#tblID").trigger("update");
where #tblID is the table ID and str is the html of table rows assigned to table.
