problem with jquery tablesorter with dynamic added rows

Question

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 fi

Answer 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]);
        });
        return false;
    });
});

Answer 2

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

Answer 3

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.

Answer 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.