Problem With Jquery Tablesorter With Dynamic Added Rows

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 th

Solution 1:

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]);
        });
        returnfalse;
    });
});

Solution 2:

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.

Solution 3:

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();

Solution 4:

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.