Sticky header - full height wrapper

[ric79]

Hello everybody!

I would know if sticky header (cfr; http://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html) could you be user with a wrapper having

• x scroller enabled (if necessary)
• no y-scrolling (full height!)

I'm using Bootstrap 3 and, with other tables, I'm used to wrap them with table-responsive class (cfr: http://getbootstrap.com/css/#tables-responsive).

Is there a way to obtain the same effect?

Riccardo

[Mottie]

Hi @ric79!

I'm going to be busy today, so I won't get around to looking at this until later tonight... I'll see what I can do.

[ric79]

Thanks a lot. I will wait, don t worry!

[ric79]

Hello @Mottie,
News about the question?

[Mottie]

Sorry, I've been trying to find time & motivation to fix this issue... So far, I've come up with a solution that would require adding two new options:

• One contains a set element in which to "watch" for horizontal scrolling
• The other contains a set element to "watch" for vertical scrolling.

It's a bit tricky, especially when trying to keep things lined up. So it'll take some more work.

[ric79]

Mottie,
I wrote just a small piece of javascript to set the "tablesorter div height" to "wrapper div scrollHeight".

I would like to run this line of code on tablesorter complete (filtering or sorting or paging server side).
There is not onComplete method. How can I solve the problem?

[Mottie]

Just about everything has it's own complete event.

1. Sort: SortEnd
2. Pager: pagerComplete
3. Filter: filterEnd

So if you want the last one to complete out of the three, the filter widget "should" be the last one to end, since it is a widget. The pager is an exception because it runs outside of the widget system, even the pager widget.

[Deleted user]

I think I am in the same boot because I have my table inside a div which takes as much height as possible (height: 100%) so it is not a fixed height as in your examples http://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html
I really would like to have this feature. @ric79 did you manage to find a solution or @Mottie is this feature still on your radar?

[Mottie]

Hi @JanOonk!

You can do it now using the stickyHeaders_attachTo and stickyHeaders_yScroll options.

$('#table').tablesorter({
    theme: "bootstrap",
    widthFixed: true,
    headerTemplate: '{content} {icon}',
    widgets: ['zebra', 'stickyHeaders', 'uitheme'],
    widgetOptions: {
        stickyHeaders_attachTo: '.table-responsive',
        stickyHeaders_yScroll: $(window)
    }
});

I had to fix a few minor bugs to get the header to work properly. Hopefully adding a position:relative style to the .table-responsive div won't break anything.

Oddly, I have the demo working perfectly locally, but when I created this (demo), the header shifts and resizes incorrectly. I'll try to look at this again tomorrow.

Anyway, you can check out the updates in the master branch.

[Deleted user]

Hi,

thanks for your reply and effort. I updated your example to match my case and tried to minimize the test case as good as possible:
http://jsfiddle.net/856bzzeL/30/

It doesn't work yet. Hopefully this testcase can help you.

[Mottie]

Oh wait, it does work!

http://jsfiddle.net/856bzzeL/32/

The problem was that the demo was pointing to jQuery v3.0.0-pre which was not calculating the widths the same as the current version. When I change the version to 2.1.0, it works fine.

[Deleted user]

Ok now your example works, but mine (also when you change jQuery to 2.1.0) still doesn't :(
http://jsfiddle.net/856bzzeL/33/

[Mottie]

@JanOonk! I'm not sure what to make of your demo... it's not really a full height, scrolling with the page kind of demo. I wonder if the scroller widget might work better for you.

@ric79 can you test out the latest change and see if it works for you; and sorry for taking so long to fix it.

[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.