Fixed Header with ScrollX

hasmyr

I am unable to get FixedHeader to work with a datatable that is wide and requires horizontal scrolling. I instantiate the datatable like so

table = $('#dataTable').DataTable({
                dom: 'Bfrtip',
                processing: true,
                data: dataSet,
                scrollX: true,
                fixedHeader: true

This inserts the fixed header properly but when I scroll left and right the header stays the same. So I had to tweak the code to make the header move when I scroll right and left.

table = $('#dataTable').DataTable({
                dom: 'Bfrtip',
                processing: true,
                data: dataSet,
                scrollX: true,
                fixedHeader: true,
                "initComplete": function (settings, json) {

                    $('.dataTables_scrollBody').on('scroll', function () {
                        $('.dataTables_scrollHeadInner').scrollLeft($(this).scrollLeft());
                    });

                    $(document).on('scroll', function () {

                        var scroll_pos = $(this).scrollTop();
                        var margin = $('.dataTables_scrollHead').offset().top;
                        var cur_pos = $('.dataTables_scrollHeadInner').position();
                        var header_pos = cur_pos.top;

                        if (scroll_pos < margin)
                            var header_pos = margin - scroll_pos;
                        else
                            header_pos = 0;

                        $('.dataTables_scrollHeadInner').css({ "top": header_pos });
                    });
                }

This along with some css

table.dataTable.fixedHeader-floating {
            display: none !important;
        }

        .dataTables_scrollHeadInner {
            margin-left: 0px;
            width: 100% !important;
            position: fixed;
            display: block;
            overflow: hidden;
            margin-right: 30px;
            background: white;
            z-index: 1000;
        }

        .dataTables_scrollBody {
            padding-top: 60px;
        }

Almost does what I want, except for two issues. One there is an empty header on my datatable below the fixed header. Even though it does not have any information in the row it places the sorting arrows one line below so essentially the first 2 rows of the table have sort arrows, which looks bad.

I fixed this with some javascript, but whenever I use the sort arrows on the fixed header the arrows that I removed from the body of the table return.

I have honestly spent too much time on this, is this any solution to have fixed header that scroll horizontally with the table without having to write a ton of css.

kthorngren

Please see this thread from earlier today:
https://datatables.net/forums/discussion/55649/fixed-header-with-scroll-compatibility#latest

Note that FixedHeader and the Datatables scrolling features aren't campatible at this time. This is documented in the FixedHeader docs and the Compatibility Matrix.

Kevin

hwijaya

I got it figured out, hopefully this is useful for someone or help in the development as well.

My datatables is in a DIV and horizontal Scrolling enable due to huge table. When fixed header was set it was set as FIXED, and a new table is inserted at the BODY rather than inside the div.

I made it appended to the DIV instead of BODY so that the overflow rule might be inherited.

File:
dataTables.fixedHeader.min.js (search for "appendTo")
From:
e.table().node().cloneNode(!1)).removeAttr("id").append(f).appendTo("body")
To:
e.table().node().cloneNode(!1)).removeAttr("id").append(f).appendTo(".dataTables_scroll")

Now that it's appended to the the datatables-created-div, same level as dataTables_scrollHead, dataTables_scrollBody rather than stranded alone at body, whatever overflow still showing/sticking out.

File:
fixedHeader.bootstrap.min.css
From:
table.dataTable.fixedHeader-floating{position:fixed !important}
To
table.dataTable.fixedHeader-floating{position:absolute !important}

or File:
fixedHeader.dataTables.min.css
From:
table.fixedHeader-floating{position:fixed !important;background-color:white;}
To
table.fixedHeader-floating{position:absolute !important;background-color:white;}

Careful of CACHE of the CSS and JS files.

Now that the floating sticky row has appeared but out of place and overflow in effect.
Have this JS running, detecting when fixedHeader-floating appears, keep adjusting them to follow the horizontal scroll and stick to the top.

setInterval(function(){
if($('.fixedHeader-floating').is(':visible')){
var myoffset = Math.round($(window).scrollTop() - $('#Detail2Container').position().top + $('.topbar').height() - 145);
var positionleft = $('.dataTables_scrollHeadInner').position();
$('.fixedHeader-floating').css({ 'top': myoffset, 'left': positionleft.left + 10 });
}
}, 50); // every 50ms

Detail2Container is the DIV that wrap the Datatables.
I couldn't use dataTables_wrapper as reference as there are a few of them in the same page. In my page, I only one table that needs fixedHeader, if I need 2, it will be tough. But I will deal with it when the needs arise.

You could adjust the calculation according to your own design.

2 days for me to figure this out. So I feel like sharing it too.