To solve this problem, you have to add in 2 customised functions/events to take care of the row adding/removal.
Add the following 2 functions to the tablesoter javascript file.
function addRow(table, newRow){
//Rebuild html table from the modified rowsCopy
$.tablesorter.clearTableBody(table);
if (table.config.rowsCopy!=undefined)
$.each(table.config.rowsCopy, function() {
$(table).find('tbody:first').append($(this));
});
//Append new row to the HTML table
$(table).find('tbody:first').append(newRow);
//Update call will rebuild tablesorter.cache from the existing HTML table
$(table).trigger("update");
//With pager plugin, this will call appender function in pager
//In turn, it will redraw the table with pagination
$(table).trigger("appendCache");
//Retain sorting if any
$(table).trigger("sorton",[table.config.sortList]);
}
function removeRow(table, rowId){
//Remove the selected row from pager.rowsCopy
var newRowsCopy = $.grep(table.config.rowsCopy, function(n, i){
return ($(n).attr('id')!=rowId);
});
table.config.rowsCopy = newRowsCopy;
//Rebuild html table from the modified rowsCopy
$.tablesorter.clearTableBody(table);
if (table.config.rowsCopy!=undefined)
$.each(table.config.rowsCopy, function() {
$(table).find('tbody:first').append($(this));
});
//Update call will rebuild tablesorter.cache from the existing HTML table
$(table).trigger("update");
//With pager plugin, this will call appender function in pager
//In turn, it will redraw the table with pagination
$(table).trigger("appendCache");
}
You can bind the functions 2 customised events as follows:
$this.bind("addRow",function(event,newRow){
addRow(this,newRow);
});
$this.bind("removeRow",function(event,rowId){
removeRow(this,rowId);
});
Finally you can call the events from your page as follows:
$(sortTable).trigger("removeRow",[id for the row to be removed]);
var newTr = $('<tr><td>New Row</td></tr>');
$(sortTable).trigger("addRow",[newTr]);
