Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 708
code-8 Avatar asked Nov 01 '16 13:11

code-8


People also ask

How do you fix a data table header?

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.

How do I make my table header sticky in HTML?

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>.

What is header offset?

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.


2 Answers

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/

like image 60
Dekel Avatar answered Sep 20 '22 05:09

Dekel


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!

like image 43
David R Avatar answered Sep 20 '22 05:09

David R