Tablesorter works by collecting all of the content of the table and putting it into a cache. When you sort a table, it actually sorts the cache, then updates the table by putting the rows back in the correct sort order.
If you change any content, the cache does not automatically update. So if you sort the table, it is still pulling the stored rows from the cache and overwrites any newly added rows or all of the rows if you are using ajax.
So, after your script updates the table with fresh ajax data, trigger an "update" event on the table to signal to the tablesorter plugin that the contents of the table have changed. It would look something like this:
$.ajax({
dataType: "json",
url: url,
data: data,
success: function(){
// process, then add the table contents
$('table')
.find('tbody').html( newStuff )
// tell tablesorter that new stuff was added
// this is triggered on the tbody,
// but the event bubbles up to the table
.trigger('update');
}
});
Additionally, since all of the table contents are constantly changing, make sure to use delegated events on any buttons or form elements within the table. For example:
$('table').on('click', '.checkout-button', function(){
// do something
});