Question

I have a below table.

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>No</th>
    <th>Name</th>     
    <th>Email</th> 
    <th class='time'>Time</th> 
    <th>Price</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>1</td>
    <td>Smith</td>    
    <td>[e-mail]</td> 
    <td class='time'>60 mins</td> 
    <td>45</td> 
</tr> 

</tbody> 
</table> 

I am using jquery tablesorter plugin.
Onready, tablesorter is working well. I can see all columns are sort able.

In my application, after clicking ‘Refresh’ button, dynamically rows are being added or removed. It means, Table content will be changed. After table modification, the sorting is not working.

here is jsfiddle demo.

below is the code to invoke tablesorter.

   $("#myTable").tablesorter({
        headers: { 
            4: { sorter: "integer"}, 
            2: {sorter: false} 
        },
        debug:true,
        textExtraction:function(node){
           var $node = $(node)
           var text = $node.text();  
           if ($node.hasClass('time')) {
                text = text.replace('mins', '');
            };
            return text;            
        }
    });

In given demo example, added row becomes first row and it is not used for sorting.

Answer 1

A rudimentary lookover of the API documentation revealed this link to a demo: http://tablesorter.com/docs/example-empty-table.html

The key is this line of code:

    // let the plugin know that we made a update 
    $("table").trigger("update"); 

If you add that to your code…

   $("#myTable").append(row).trigger("update");   

… it works