Updating jQuery Tablesorter plugin after removing a row from DOM

I found a solution that worked for me:

var usersTable = $(".tablesorter");
usersTable.trigger("update")
  .trigger("sorton", [usersTable.get(0).config.sortList])
  .trigger("appendCache")
  .trigger("applyWidgets");

Put this after the place where you've edited the table.

After some tinkering around with this problem I conclude the problems arise from the combined use of jQuery Tablesorter + jQuery TablesorterPager. With out the pager removing the row and doing and "update" is enough.

When you also include the pager it gets much more difficult to do this right (as how you noticed correctly there are some caching issues).

But the main reason for your problem is that jQuery Tablesorter isn't thought to be used for tables which you intent to modify (in the sense of adding/removing rows). And this applies even more when you additionally use TablesorterPager. Just reread the description of jQuery Tablesorter

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

A clear and concise field of application for TableSorter. It doesn't even mention ajax, edit, remove, append, ..... or similar terms on the page. It is only for sorting a static table.

So the actual solution is.... start looking for another jQuery "Table" plugin which was built from the start with the intention/possibility that the table can be modified. And which supports this by default (removing, adding, ....)

Ok nonetheless here is the solution for:

jQuery Tablesorter + TablesorterPager remove rows (TR)

Quick copy-paste of the javascript source-code (HTML based on TablesorterPager example)

// "borrowed" from John Resig: Javascript Array Remove
// http://ejohn.org/blog/javascript-array-remove/
Array.prototype.remove = function(from, to) {
    var rest = this.slice((to || from) + 1 || this.length);
    this.length = from < 0 ? this.length + from : from;
    return this.push.apply(this, rest);
};

//repopulate table with data from rowCache
function repopulateTableBody(tbl) {
    //aka cleanTableBody from TableSorter code
    if($.browser.msie) {
        function empty() {
            while ( this.firstChild ) this.removeChild( this.firstChild );
        }
        empty.apply(tbl.tBodies[0]);
    } else {
        tbl.tBodies[0].innerHTML = "";
    }
    jQuery.each(tbl.config.rowsCopy, function() {
        tbl.tBodies[0].appendChild(this.get(0));
    });
}
//removes the passed in row and updates the tablesorter+pager
function remove(tr, table) {
    //pager modifies actual DOM table to have only #pagesize TR's
    //thus we need to repopulate from the cache first
    repopulateTableBody(table.get(0));
    var index = $("tr", table).index(tr)-2;
    var c = table.get(0).config;
    tr.remove();
    //remove row from cache too
    c.rowsCopy.remove(index);
    c.totalRows = c.rowsCopy.length;
    c.totalPages = Math.ceil(c.totalRows / config.size);
    //now update
    table.trigger("update");
    //simulate user switches page to get pager to update too
    index = c.page < c.totalPages-1;
    $(".next").trigger("click");
    if(index)
        $(".prev").trigger("click");
}

$(function() {
    var table;
    //make all students with Major Languages removable
    $('table td:contains("Languages")').css("background-color", "red").live("click", function() {
        remove($(this).parents('tr').eq(0), table);
    });

    //create tablesorter+pager
    // CHANGED HERE OOPS
    // var table = $("table#tablesorter");
    table = $("table#tablesorter");
    table.tablesorter( { sortList: [ [0,0], [2,1] ] } )
        .tablesorterPager( { container: $("#pager")}  );
});

I made a testpage for you with my solution (click the red TD's == removing that row).

http://jsbin.com/uburo (http://jsbin.com/uburo/edit for the source)

If question remain on how/why/.... Comment

Things goes tricky when you use both tablesorterpager and tablesorterfilter plugins - solution with:

$("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");

works only for pager, filter has another cache. I've looking for solution for almost 2 hours, at last i've written something like this:

$("#deleteRowButton").click( function(){
  // index of row which will be deleted
  var index = $('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').index();
  // table with tablesorter
  var table = document.getElementById( 'gridTable' ).config.cache.row;
  // deleting row
  $('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').remove();
  // truly DELETING row, not only mark as deleted - after this list of rows should look like [tr], [tr], [tr], undefined, [tr], ...
  delete( table[index] );
  // tablesorter things
  $("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");
});

I'm deleting row which has rel attribute the same as input#removeThisID value.

Now it's time to modify tablesorterfilter plugin. In doFilter function, find lines:

// Walk through all of the table's rows and search.
// Rows which match the string will be pushed into the resultRows array.
var allRows = table.config.cache.row;
var resultRows = [];

and replace these with:

// Walk through all of the table's rows and search.
// Rows which match the string will be pushed into the resultRows array.
var allRows = table.config.cache.row;

// refresh cache 'by hand'
var newcache = new Array();
var i = 0;        
for( var a in allRows )
{
  newcache[i] = allRows[a];
  i++;
}
allRows = newcache;
var resultRows = [];

that's all...

regards form Poland :)