Mottie / tablesorter

Github fork of Christian Bach's tablesorter plugin + awesomeness ~
https://mottie.github.io/tablesorter/docs/
2.61k stars 754 forks source link

stickyHeaders and horizontal scroll #491

Open SilverSilencer opened 10 years ago

SilverSilencer commented 10 years ago

I tried to use stickyHeaders which works great on normal table, but I have many fields and so I use horizontal scroller (I scroll to left/right), and when I move down and stickyHeaders appear, they are not shown inside that limited width div, but they go over and all fields titles are shown all the time, they are not shown inside limited width div. I tried to use stickyHeaders_attachTo, but I couldn't get it to work.

SilverSilencer commented 10 years ago

I have uploaded demo files and modified it so that table is inside div with 600px width and you have to scroll right in order to see all data. That is all OK, but when you move down and stickyHeaders appear they are placed over all screen instead only inside div with 600px width.

You can see the problem in action here -> http://dirt3.me.pn/

Here is another example with no white-space property and with 400px width - http://dirt3.me.pn/index2.html

Mottie commented 10 years ago

Hi @SilverSilencer!

It looks like a class of wrapper is missing on the div wrapping the table; then set the stickyHeaders_attachTo option to that wrapper (demo):

HTML

<div style="width: 600px;">
    <div style="width:99%; overflow:hidden; height:100%; overflow-x:scroll;">
        <div class="wrapper">
            <table id="table1" class="tablesorter">
            ...
            </table>
        </div>
    </div>
</div>

CSS

 .wrapper {
    position: relative;
    padding: 0 5px;
    /*make this width smaller than the outer div, so the scroll bar is visible*/
    width: 580px;
    height: 500px;
    overflow-y: auto;
}

Script

$("#table1").tablesorter({
    theme: 'blue',
    widgets: [ 'zebra', 'stickyHeaders', 'filter'],
    widgetOptions: {
        // jQuery selector or object to attach sticky header to
        stickyHeaders_attachTo: $('.wrapper')
    }
});
SilverSilencer commented 10 years ago

I tried this but in this case vertical scroller is shown inside div instead on right page for all page. As soon as I make height 100%, header is not attached when I scroll whole page down - http://jsfiddle.net/abkNM/1984/

RajuTicvic commented 5 years ago

@Mottie In http://jsfiddle.net/Mottie/abkNM/1979/ attached to parent not working why?

Mottie commented 5 years ago

Sorry, I didn't have time to troubleshoot. The "Attach sticky header to its parent" demo on this page does work as expected; even on narrow screens.

cwisdo commented 5 years ago

I ran into this before.

@RajuTicvic that fiddle is set to use the latest jQuery nightly build (jQuery edge) which is throwing errors because of removed functions (e.g., $.isFunction)

If you change the environment to explicitly use jQuery 3.3.1, it will work as expected

cwisdo commented 5 years ago

E.g. Here is a fiddle with the exact same code + jQuery 3.3.1 which works.

http://jsfiddle.net/cwisdo/dt52q6sj/