Menu
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>
How would one go about and debug this?
708
The easiest way to get and use FixedHeader is to use the DataTables download builder where you can select the software that you wish to use on your page and have a single Javascript and CSS file created and hosted for you.
By setting the position property to “sticky” and specifying “0” as a value of the top property for the <th> element. By setting the display to “block” for both <thead> and <tbody> element so that we can apply the height and overflow properties to <tbody>.
Description. This method provides the ability to control the offset of the fixed header. This offset can be useful if you have an element floating at the top of a page (a navigation menu for example) and you wish to have the header stick to the bottom of that element rather than to the top of the page.
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/
60
Your fiddle seems to be missing the dataTables.fixedHeader plugin as well as the fixedHeader.dataTables CSS file which was causing you the page from rendering properly (with the fixed headers).
Working DEMO: - https://jsfiddle.net/s2xbf9d0/7/
Hope this helps!
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
