tablesorterPage: when option removeRows set to true, pager stays disabled

[Stryker93]

The pager widget works great, as long as I do not set removeRows to true. If I do that, the pager controls stay disabled.
Tested in current Chrome with bootstrap 3 and about 5000 rows.

[Mottie]

Hi @Stryker93!

I think this might be due to some interference with Bootstrap css definitions. I set up this demo, and renamed the pager "disabled" applied class, and it seems to be working fine for me (but the demo isn't using Bootstrap).

CSS

.ts-disabled {
    opacity: 0.4;
}

Script

$('table').tablesorter({
    theme: 'blackice',
    widthFixed: true,
    widgets: ['zebra', 'pager'],
    widgetOptions: {
        pager_output: '{startRow} to {endRow} of {totalRows} rows',
        pager_removeRows: true,
        pager_css : {
            disabled : 'ts-disabled'
        }
    }
});

[Mottie]

Here is a demo using Bootstrap

[Stryker93]

Hi @Mottie
I it not just that the buttons of the pager have a disabled look. They are also without a function.
I edited your fiddle, so you see what happends with the pager:
http://jsfiddle.net/Stryker93/abkNM/2143/

[Mottie]

Oh, I understand now... it's because of the filter widget. Right now it doesn't work properly when you set the pager (addon or widget) with removeRows: true. It tries to find the actual table rows instead of searching the cache. I'll need to modify the tablesorter core before I can get the filter widget to work, so it'll take some time.

[Stryker93]

Okay.
Did you see that the zebra widget does also not work in my example? If you set pager_removeRows: false you can see this. Any hint on this?

[Mottie]

The table is striped. The Bootstrap theme ($.tablesorter.themes.bootstrap.table) includes the table-striped table class name, which I see applied. It's just that the colors are very subtle.

[Stryker93]

Yes, the table is striped. But when you begin to filter they aren't striped anymore.

[Mottie]

Make sure that the theme.bootstrap.css stylesheet is included. It uses the zebra stripe widget to apply to the rows since bootstrap uses nth-child to style rows, and that method doesn't work when rows are hidden by the filter widget (see the Bootstrap demo for more details).

In any case, it does work if you include the zebra widget... here is an updated demo with not-so-subtle row coloring.

[Stryker93]

Well, if you have a look at my fiddle which was based on your example (so including theme.bootstrap.css), you see that striping does not work after filtering: http://jsfiddle.net/Stryker93/abkNM/2149/

[Mottie]

Hmm, ok, it looks like Bootstrap 3+ has increased the css specificity, so it's overriding the theme.bootstrap.css settings... it's only a css problem, and I'll have it fixed in the next update.

Bootstrap 3.0.3

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th { background-color: #f9f9f9; }

Bootstrap 2.3.2

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th { background-color:#f9f9f9; }

If you don't want to wait, modify the theme.bootstrap.css file with the following css:

.tablesorter-bootstrap > tbody > tr.odd > td {
    background-color: #f9f9f9;
}
.tablesorter-bootstrap > tbody > tr.odd:hover > td,
.tablesorter-bootstrap > tbody > tr.even:hover > td {
    background-color: #f5f5f5;
}
.tablesorter-bootstrap > tbody > tr.even > td {
    background-color: #fff;
}

[Stryker93]

Great, thank you very much!

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue this discussion.

[Mottie]

Doh, this issue is about the pager and setting removeRows to true... it is still a work-in-progress.

[kashbeck]

Mottie - Great job on the tablesorter updates! It has been fun to work with.

Do you have a time frame for if/when you think you will get to this issue? We are having performance problems in IE and removeRows would help. Thanks!

[Mottie]

Hi @kodyashbeck!

If you mean the filter widget, then I was planning on working on it this weekend. So, hopefully the next update will be available by Monday... just a guess.