Question

I would explain the functionality of the jquery plugin myself but the website definitely does it better than what I can, it seems quite a simple plugin for the most part

http://tablesorter.com/docs/

I’m using this plug to filter my tables after they are generated, works fine. The issue is that the table is live updating and after table is filtered, if a new update is received and then you filter the table again, the data duplicates.

I have been looking in to it a lot, it seems the plugin builds up a cache of the information which allows the data to be filtered.

What I’d like to do is to delete the cache and rebuild it everytime there is an update, preventing duplicate information from being appended to the table array.

client javascript:

function appendTables(appendData, index) {
var tabPage = "#tabpage_"+index+" > #myJobs_"+index+" > .userJobs";
userJobsElement = $(tabPage);

userJobsElement.empty();
userJobsElement.append(appendData);
applySortTable();
}

this part generates multiple tables using a dynamic id as well as 2 standard tables:

function applySortTable() {
var tables = $('table');
tableCount = tables.length-2;
$("#myJobs_all").tablesorter();
$("#myJobs_noteam").tablesorter();
for (var i = 0; i < tableCount; i++){
 $("#myJobs_"+ i).tablesorter();
}

the table is then generated using the plugin and as I said creates a cache, does anyone know how to clear the cache then have it rebuild for when this happens to a user?

---

update

the updating of the data is now working but currently we have setup a tab based table system to view different team information. when the update is processed, the table is then only updated in the first table and the other tables stop working, anyone know how to handle this?

Answer 1

Re-initializing the tablesorter plugin is not the correct method. After adding new content, simply trigger the update method:

$("table tbody")
    .append(appendData)
    .trigger('update'); // this event will bubble up

Check out this demo‘s code example