TableSorterPager counter reset after sort

Question

I use tablesorter for most of my data. It works well but I get a weird behaviour with the tablesorterPager plugin.

When the table is created and tablesorter is called, the pager displays correct informations and I can navigate through the different pages.
But when I use the sort feature (useful when you use a sorter :-) ), the pager tells me that there is only one page, and I'm not able to see the other pages.

Here is the JS code I use. I compared with the official documentation and almost everything I found on the web and I can't really see differences that can explains this behaviour.

$("#tlisting").tablesorter({

        headers: {
            2: {sorter: 'nom'},
            3: {sorter: 'date'},
            0: {sorter: false},
            6: {sorter: false},
            7: {sorter: false}
        }, debug: true 
    }).tablesorterPager({container: $("#pager")});

    var sorting = [[3, 1]];
    if ($("#tlisting tbody tr.ni_tr").length > 0) {
        $("#tlisting").trigger("sorton", [sorting]);
    }

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

And here is the debug output :

Building cache for 20 rows:,1ms
Evaling expression:var sortWrapper = function(a,b) {var e0 = (a[2] == b[2] ? 0 : (a[2] === null ? Number.POSITIVE_INFINITY : (b[2] === null ? Number.NEGATIVE_INFINITY : (a[2] < b[2]) ? -1 : 1 )));if(e0) { return e0; } else { return a[8]-b[8];}; return 0; }; ,0ms 
Sorting on 2,0 and dir 0 time:,1ms
Rebuilt table:,2ms 

Thank you in advance for any clue.

Answer 1

I'm guessing you're using the original tablesorter (http://tablesorter.com). Don't trigger an appendCache after an update, especially with the pager plugin.

The appendCache method adds all table rows back into the table. So for example, if you wanted to add a row or rows to a table, with the pager initialized, you would do the following:

$('table')
    .trigger('appendCache')
    .append( $myNewRows )
    .trigger('update')
    .trigger('sorton', [sorting]);

Might I suggest you check out my fork of tablesorter (don't forget to update the pager too). You shouldn't need to make any changes to your initialization code. And if you need to add a row or rows to the table, you can use the addRows method:

var $row = $('<tr>...</tr>'),
    resort = true, // resort the table using the current sort
    callback = function(table){
        console.log('rows added', $row);
    };

$('table')
    .find('tbody').append($row)
    .trigger('addRows', [$row, resort, callback]);