fixedHeader and scrollX

yasirunanayakkara

Put this into JS

var dataTable = $('#sample_data').DataTable({
        "processing" : true,
        "serverSide" : true,
        "order" : [],
        "searching" : false,
        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 = 355; // header location,you can edit it
                    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});
                });
            },
        "ajax" : {
            url:"action/fetch.php",
            type:"POST",
            data:{
                filter_name:filter_name, filter_gender:filter_gender, filter_country:filter_country
            }
        }
        });

put this into style

/* <-- data tables */
table.dataTable.fixedHeader-floating {
     display: none !important; /* Hide the fixedHeader since we dont need it*/
}
 
 
.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;
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Skylord123

@kottan That is very interesting. For me it works perfectly. When I scroll down after side-scrolling it jumps straight to where it needs to be.

It gets the bounding rectangle for the scroll body which should tell us how far away from the edge of the screen it is. I'm curious if your table is maybe nested in some sort of element that is setting a fixed position or doing something else that is messing with the bounding rectangle dimensions. Your table doesn't happen to be within another element that is scrolling on the X axis is it? That would definitely throw it off. If that is the case you will have to edit the code to take into account the parent scroll's bounding rectangle and x-scrolling position (just like how it does currently for the nTableBody).

Sorry for the late reply.