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

Remove the line

  "sScrollX": "100%",

and fixedheader will then work

Answer 2

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 :)

Answer 3

For implementing Fixed header in jQuery Datatable, Please add "FixedHeader.min.js" in page header and add following code to page:

var oFH = new FixedHeader(oTable);
$('#tablename thead th:eq(0)').html('First column');
oFH.fnUpdate();

Hope this will help you.

Answer 4

Currently no, FixedHeader is not supported with scrolling - I'm sure its perfectly possible to add that functionality, but as of yet, I've not had time to do so! Couldn't you just enable Y-scrolling? It achieves much the same effect, although its scrolling an inner element (which is already X-scrolling) rather than full page scrolling.

Answer 5

First import the FixedHeader.js file 
<script type="text/javascript" charset="utf-8"    src="RELATIVE_PATH/fixedHeader.js">
</script> 

And then add following code to you html/ftl file
<script type="text/javascript">
         $(document).ready(function() {
     var table = $('#employeeDetails').DataTable();
    new $.fn.dataTable.FixedHeader( table );
} );
      </script>

..............Hope, This works fine.