CODEWITHSUNDEEP
javascriptjquerydatatableshtml-table
code-8
code-8

Reputation: 58662

DataTable Fixed Header Not Being Applied

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?

Upvotes: 15

Views: 49042

Answers (2)

David R
David R

Reputation: 15639

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!

Upvotes: 6

Dekel
Dekel

Reputation: 62556

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/

Upvotes: 28

Related Questions