JQuery FixedHeader functionality

Question

Working on a jsp page. The first row (header) needs to be freezed as scrolled down through the page. I am trying to implement it using JQuery provided functionality but wasnt fruitful. Here is the sample code: refs :

<script type="text/javascript" src="<c:url value=" /resources/js/jquery-2.1.3.js "/>"></script>
<script type="text/javascript" src="<c:url value=" /resources/js/jquery.dataTables.min.js "/>"></script>
<script type="text/javascript" src="<c:url value=" /resources/js/dataTables.fixedHeader.js "/>"></script>
<script type="text/javascript" src="<c:url value=" /resources/js/dataTables.fixedHeader.min.js "/>"></script>
<script>
$(document).ready(function() {
    $('#draytable_pickup').dataTable({
        "paging": true,
        "ordering": true
    });

    //   $('#draytable_pickup').addClass('fixed');         
});

$(document).ready(function() {
    $('#draytable_pickup').fixedHeaderTable('show');
});
</script>
<table id="draytable_pickup" class="table table-hover table-striped table-bordered table-condensed small" data-link="row">
    <thead>
        <tr>
        ....
        ....
        </tr>

Online suggestions doesnt seem to work for me. Can anyone please suggest me what is the way to do ?

Answer 1

Here's a working example: https://jsfiddle.net/dLz8evtb/

Here's a screenshot showing the header even though I've scrolled all the way to the bottom. Also page numbers are showing.

Here's the JavaScript:

$(document).ready(function() {
    var dt = $('#draytable_pickup').DataTable({
        "paging": true,
        "ordering": true,
        "pageLength": 50
    });
    new $.fn.dataTable.FixedHeader( dt );
});

I set the pageLength to 50 so you can see the scrolling easier.

The main thing you need is to assign the result from the DataTable call to a variable - dt in my code - and then pass it to the $.fn.dataTable.FixedHeader call.

See the documentation: https://www.datatables.net/extensions/fixedheader/

Edit: Please note the original answer had a link to a jsfiddle that imported external files using http, not https. This worked on some browsers, but others were blocking this content.