ihue ihue - 1 month ago 14
Javascript Question

DataTable Fixed Header Not Working

I have a table using datatables plug-in.

I'm trying to make my table header fixed, and follow this link : here

$('.device-table').DataTable( {
"fixedHeader": {
header: true,
},
"bLengthChange": false,
"Filter": false,
"Info": false,
} );


I don't see the effect.




I've included both js files of datatables and fixedHeader:

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>





Question



How would one go about and debug this ?




I'm opening to any suggestions at this moment.

Any hints / suggestions / helps on this be will be much appreciated !

Answer

For the fixedHeader plugin to work you also need the css file:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">

Check this update:
https://jsfiddle.net/s2xbf9d0/6/