Fixed DataTable header not working

Question

I have a table using the datatables plugin.

I am trying to make the table title corrected and follow this link: here

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

I do not see the effect.

---

I have included both js files with 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 I do this and debug this?

---

I open any offers at this moment.

Any tips / suggestions / help on this would be greatly appreciated!

Answer 1

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

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

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

Answer 2

It seems that your script is missing the dataTables.fixedHeader plugin, as well as the CSS fixedHeader.dataTables file, which forces you to display the page correctly (with fixed headers).

Working DEMO: - https://jsfiddle.net/s2xbf9d0/7/

Hope this helps!