tablesorter -- pager_output variables shared across multiple tables

Question

Using the latest jquery / tablesorter / widgets (as of Jan 18, 2016), using the pager widget, set pager_output to anything you want, so long as you include {totalRows}. Create two or more trivial tables with different id's and attach tablesorter to each id. Make sure the tables have a different number of rows. The pager will show the totalRows of the last-encountered table for every table rather than the appropriate number for each table.

The same is true for {filteredRows} when you including filtering.

Mottie · Answer 1 · 2016-01-18T19:38:06.033

2

It works fine for me... make sure that the code isn't pointing to the same pager container for both tables (demo)

$('table').each(function(){
    $(this).tablesorter({
        theme: "bootstrap",
        widthFixed: true,
        headerTemplate: '{content} {icon}',
        widgets: ["uitheme", "filter", "zebra"],
    })
    .tablesorterPager({
        container: '.' + this.id,
        cssGoto: ".pagenum",
        output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
    });
});

Update: Oops, here is a demo using the pager widget

$('table').each(function(){
    $(this).tablesorter({ debug: true,
        theme: "bootstrap",
        widthFixed: true,
        headerTemplate: '{content} {icon}',
        widgets: ["uitheme", "filter", "zebra", 'pager'],
      widgetOptions: {
        pager_selectors : {
            container : '.' + this.id
        },
        pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
      }
    });
});

edited Jan 18 '16 at 19:38

answered Jan 18 '16 at 19:31

Mottie

84,355
30
126
241

Thanks, Mottie. I now realize the source of my problem, but still don't know how to fix it. I see that I have distinct id's for each table, which allows me to create different tablesorter configs for each, but, silly me, there is nothing that says any particular pager belongs to any particular table. How do I inform each pager which table it belongs to, or probably vice versa, tell each table which pager to update? – Bennett Barouch Jan 18 '16 at 23:33
Look at the code I shared.. that method targets each table, and uses the table id to match the pager class name which matches the id. Alternatively, you could initialize each table separately. – Mottie Jan 19 '16 at 03:12
I tried that and it failed. I don't recall the message and I will have to come back to this later -- other things are requiring my immediate attention. I apologize. One difference between my code and yours is that I am using table ids, as in $("#someTable").tablesorter({}) so I can have a different config on each table, while you are applying the same config across all elements in the table class. I don't know if that changes the cvalue of the ever-morhing 'this' at a critical moment reltive to this code snippet. (I am still quite new to javascript, so please tolerate my general ignorance.) – Bennett Barouch Jan 21 '16 at 18:23
I finally am able to get back to this. Rather than resume from where I left off, I just started with your demo. I agree it works fine. It looks to me that the way the pager and table are connected is that the table gets a unique id and the pager gets the same id as one of its classes. Maybe it's ust because I am still a relative newbie, but I don't understand that. Perhaps you are "hitchhiking" on standard mechanisms that are not normally used in this way? Fundamentally, id !== class. – Bennett Barouch Apr 24 '16 at 19:37
In that example, the pager has the same class name as the table id. In [this example](http://jsfiddle.net/Mottie/abkNM/7994/), the pagers use the index provided by `jQuery.each()` to target the pager. Either way works, just don't use the same pager class name for both tables. – Mottie Apr 24 '16 at 21:00

tablesorter -- pager_output variables shared across multiple tables

1 Answers1