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>

Allan Jardine · Accepted Answer · 2012-02-26 10:17:56Z

3

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.

answered Feb 26, 2012 at 10:17

Allan Jardine

5,5315 gold badges33 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

john k · Accepted Answer · 2012-07-31 18:17:31Z

1

Remove the line

  "sScrollX": "100%",

and fixedheader will then work

answered Jul 31, 2012 at 18:17

john k

6,6725 gold badges59 silver badges63 bronze badges

Comments

user3497034 · Accepted Answer · 2014-04-11 12:41:45Z

0

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.

answered Apr 11, 2014 at 12:41

user3497034

2 Comments

SivaRajini Over a year ago

i am facing some issue in jquery datatable with fixed header.

SivaRajini Over a year ago

fixed header poistion is still absolute only eventhough i scrolled.top position is not changing..what might be the cause?

Akshada · Accepted Answer · 2015-07-08 07:14:28Z

0

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.

answered Jul 8, 2015 at 7:14

Akshada

1904 silver badges12 bronze badges

Comments

tarun mittal · Accepted Answer · 2018-01-17 07:18:31Z

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

Collectives™ on Stack Overflow

Fixed header on jquery datatables

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related