DataTable Fixed Header Not Being Applied

Question

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?

Can you please make a quick fiddle with your code and share us the link to debug? — David R
– David R, Commented Nov 1, 2016 at 13:51
Did you check the jsfiddle? it doesn't work... check the console for errors — Dekel
– Dekel, Commented Nov 1, 2016 at 13:59
double check again? please make sure next time it really works... — Dekel
– Dekel, Commented Nov 1, 2016 at 14:22

Dekel · Accepted Answer · 2016-11-01 14:49:02Z

28

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/

answered Nov 1, 2016 at 14:49

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

code-8 Over a year ago

I added your suggestion and still didn't see it. Check it out here = jsfiddle.net/bheng/s2xbf9d0/10

Dekel Over a year ago

You are messing the the styles :) remove the height: 150px; you have in the css and set scrollY: '150px' in the DataTable constructor instead. Check here: jsfiddle.net/s2xbf9d0/11

David R · Accepted Answer · 2016-11-01 14:58:09Z

6

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!

answered Nov 1, 2016 at 14:58

David R

15.7k8 gold badges59 silver badges74 bronze badges

1 Comment

code-8 Over a year ago

After scroll, the table won't stay !! See this : jsfiddle.net/bheng/s2xbf9d0/9

Collectives™ on Stack Overflow

DataTable Fixed Header Not Being Applied

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related