Fixed header on jquery datatables

Question

is there no other ways to set fixed header on jquery datatables??

when i try using fixed header, there\'s warning that fixed header 2 is not supported on scrolling datat

Answer 1

I had a use case, which needed scrollX, fixedColumn and fixedHeader. I could not find any solution. Moreover, as per Datatables, fixedHeader and fixedColumn are not compatible together. I solved this using custom JS and CSS.

 $(document).off("scroll");
    var posFromTop = $('.dataTables_scrollHead').offset().top;  //Initial position on page
    var navHeight = $('nav').height() // Height of navbar (offset for sticky header)
    var firstColOffsetAdjustment = 0 - $('.dataTables_scroll').find('thead tr').height(); 
    var initialMargin = $('.DTFC_LeftWrapper').css('margin-top')
    var initialTableWidth = $('.dataTables_scrollBody').width();
    $(document).on("scroll", function(e){
        if(($(window).scrollTop()+navHeight-25) >= posFromTop){
            $('.dataTables_scrollHead').addClass('sticky-thead');
            $('.dataTables_scrollHead').css('width', initialTableWidth+'px');
            $('.DTFC_LeftWrapper').css('margin-top', firstColOffsetAdjustment+"px");
        }else{
            $('.dataTables_scrollHead').removeClass('sticky-thead');
            $('.DTFC_LeftWrapper').css('margin-top', initialMargin);
        }
    })


.sticky-thead{
      position: fixed !important;
      top: 64px;
      z-index: 1000;
 }

This worked for me. Hope it helps :)