Select box filtering doesn't work from stickyheader

[HugCoder]

Hi!
Really love the tablesorter project and all the work you put into it.
I'm currently trying to add quite a mix of widgets and functions from the tablesorter but I'm encountering issues.

I'm actually having several issues, but let's start with one that is pretty clearly a broken feature. (I might of course have missed some option that solves this.)

I'm adding select box filters for the column in the header like this:
th class="filter-select" data-placeholder="test"> test </th
Select box filtering then works, but when I scroll down and have the stickyheader follow, and I apply a filter in the select box, it doesn't apply to the table. Then when I get to original (non-sticky) position, the filter is still set to whatever was set before it went on "sticky-ride".

Inspecting the html elements I see that when it becomes sticky, it also has an added class "tablesorter-external-filter", but this happens on input/search as well. It seems like the select box in the header vs in stickyheader are separated from each other, a value I set on sticky is still set on sticky but isn't applied on the table filter.
Filtering in the stickyheader using input filter seems to work though, it's just the select box that isn't "linked"/synced correctly.

Ooh, and also adding 'stickyheader' makes quicksearch (using something like $('table tbody tr').quicksearch ) add both one search box before and after table, the one after not working.

About the other issues I'm having, I'm not sure if you want one issue post per issue or them bundled in here as well. But I can briefly just mention that they have to do with adding "filter-onlyAvail" to the headers, it doesn't filter correctly. Also binding an external search box to the table with filters makes it search within column 0's select box or input filter. But I can get into details on these in their own issues.

Regards,
HugCoder

[Mottie]

Hi @HugCoder!

It looks like the main problem was recently introduced in v2.14.3. I'll work on a fix in the next update.

Thanks for reporting this issue!

Edit: I would appreciate it if you would open the other problems in separate issues, and provide a demo to make troubleshooting a little easier for me. Thanks!

Edit2: None of these issues exist if you use the css3StickyHeader widget... if your users are all using up-to-date browsers.

[fredang]

Not sure if it makes sense but this fix works for me.

I changed the file jquery.tablesorter.widgets.js (line 711):
from: .bind('keyup search', function(event, filter) {
to: .bind('keyup change search', function(event, filter) {

With that selecting a value in the selector triggers the filtering of the table.

[Mottie]

Hi @fredang!

Yes! That is the change that will be available in the next update :)

[Mottie]

Done

[HugCoder]

Sorry, but I don't think this fixed it. I just tested the new version and what I'm getting now is no effect on the filtering using select boxes (in sticky-mode), it just stays on the option it was at. Also clicking the headers for sorting does nothing as well. Only thing that works is writing text into the input search filters, but that has the slightly annoying effect of resetting the position to the top, although that is minor and something that might be preferred and not a bug. If it makes any difference on the select box filtering, I am using "filter-onlyAvail" on them as well.

I can also inform that I have just tested with the cssStickyHeader now as well, and there the filtering+sorting while in sticky-mode works just fine. I kind of don't like the transparent look and that the caption isn't following along, though, but maybe there are options for that (just found cssStickyHeaders_addCaption).

[Mottie]

Hey @HugCoder!

Hmm, you're right... it seems to be broken again.

The resetting of the table to the top of the page was just added, it was needed for when the filter results reduced the table height enough to hide the sticky header. It will only scroll to the table top when the sticky header is active.

The cssStickyHeader transparency is essentially due to the border-spacing around the table cell (jQuery UI themes). To fix the filter input background, you'll need to define some css like this:

.tablesorter-filter-row td { background: #fff; }

because the table, thead and row backgrounds don't stay with the cells.

[HugCoder]

Thanks a lot for some speedy work @Mottie !
It seems to work now but the thing not working, which maybe should be a different issue? but still is very much related, is "filter-onlyAvail", it's not shared over to the sticky. If I set something in one select box without sticky-mode it works and the non-existent options in the other select box are filtered correctly.
If I however set the first select box, then scroll into sticky-mode, I get all options available in the second select box. And if I select something that isn't actually suppose to be there, I get filtered out completely, only being left to refresh the page or reset the filters using a button.

Just tested this on cssStickyHeader, and it works as intended.

[Mottie]

Oops! Ok, I'll have that fixed in the next update.