Updating jQuery Tablesorter plugin after removing a row from DOM

Question

I have some code at the moment that hides a row that is deleted and then removes it using the .remove() function.

However I\'m having difficulty is making it remain

Answer 1

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 :)