Fixed header on jquery datatables

问题:

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> 

回答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.

回答2:

Remove the line

  "sScrollX": "100%", 

and fixedheader will then work

回答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.

回答4:

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. 

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

文章来源: Fixed header on jquery datatables