Reputation: 15
The table headers will change depending on dynamic ajax updates. When doing this using:
$('table thead').html(headers);
and then re-initialising the table using:
$("table").tablesorter({ theme : 'blue', sortList: [[2,1],[0,0]] });
The ability to sort is removed from the headers. How can I update the headers and re-initialise it so that those headers are treated correctly?
Upvotes: 1
Views: 1130
Reputation: 86413
I think in your case you might need to destroy the instance of tablesorter before re-initializing it:
// initialisation
var initOptions = {
theme: 'blue',
sortList: [[2,1],[0,0]]
};
$("table").tablesorter(initOptions);
Then after the ajax update, use:
// Remove tablesorter and all classes
$("table").trigger("destroy", [false, function(){
// callback after the destroy method
$('table thead').html('<tr>' + headers + '</tr>');
$("table").tablesorter(initOptions);
}]);
In this example, make sure the initOptions
variable is within the same closure as the initialisation code, or just duplicate it ;)
Upvotes: 1