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 datatables :(

does anyone knows how to fix that??

here is my scripts:

<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
    var oTable = $('#tabel_daftar_all').dataTable( {
        "bJQueryUI": true,
        "bPaginate": false,
        //"iDisplayLength": 5,
        //"aLengthMenu": [[5, 25, 50, -1], [5, 25, 50, "All"]],
        //"iDisplayStart": 5,
        //"sPaginationType": "full_numbers",
        "sScrollX": "100%",
        //"sScrollXInner": "150%",
        "bScrollCollapse": true,
        "bFilter": false
    } );    
    new FixedColumns( oTable, {
        "iLeftColumns": 4,
        "iLeftWidth": 350
    } );

    //new FixedHeader( oTable );
    //$('#tabel_daftar_all').dataTable().rowGrouping();
} );
</script>

Answer 1

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 2

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.

Answer 3

Remove the line

  "sScrollX": "100%",

and fixedheader will then work

Answer 4

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 5

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