Fixed Header not working

Mert1296

Hi guys,
I have an issue with the Fixed Header in datatables..
I really don't know why it's not working maybe you can help me out?
Here is my code:

`` var table = $('#table').DataTable({
scrollX: true,
paging: false,
"scrollY": "80%",

                fixedHeader : {
                header : true,
                footer : false,
                headerOffset: 45
            },

                columnDefs: [
            {
                targets: [0,1],
                orderable: false
            },
            {
                targets: [19,20,21,22,23,24,25,26],
                visible: false,
                searchable: false,
                orderable: false
            }


            ],


            "order": [[1, 'desc']],


            });

```

kthorngren

I have an issue with the Fixed Header in datatables..
I really don't know why it's not working

Not much to go on. Can you provide a link to your page or a test case replicating the issue?

Also please describe what the problem is.

Kevin

Mert1296

I'm sorry, I can't send a link because it's a website from the Company I am working for and it's just in our Server..
So my problem is that the fixed header hides the first row of my DataTable.. Also my Header is not on top of my Internet browser. So when I'm Scrolling down the page the fixed header is in the middle of my page..

kthorngren

Sounds like a styling issue or something else particular to your environment. Do the examples work for you?
https://datatables.net/extensions/fixedheader/examples/

Its hard to say without being able to see it. Can you replicate the problem with a test case?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

It doesn't sound like a data issue so the test case doesn't need to replicate that. It just needs to replicate enough of your HTML, CSS environment to replicate the issue.

Kevin

Mert1296

Another problem is, that when I am using the x-Scrollbar, the Header doesn't move together with my table..

kthorngren

Another problem is, that when I am using the x-Scrollbar, the Header doesn't move together with my table..

Like I said it sounds like a styling issue.

Kevin

Mert1296

http://live.datatables.net/budiduvu/2/edit
There you go. I fixed the Problem that the Header hides the first row but I don't know how to fix the rest...

kthorngren

The biggest issue is that you aren't loading all the required includes. You didn't have dataTables.fixedHeader.js. I'm not sure what you are doing with the CSS in your test case so I cloned yours removed that CSS and added the Datatables FixedHeader CSS.

Does this work as you expect?
http://live.datatables.net/cupafacu/1/edit

You can get the proper files from the Download Builder.

Kevin

Mert1296

So I removed my CSS and imported all Files (CSS and js) like you did but now my Header isn't fixed anymore.. But your example works fine

kthorngren

Maybe the include files are in the wrong order?

The order in the Download builder or any of the examples is what to follow. Make sure you don't have any errors in your browsers console.

If this doesn't help then you may need to add more to the test case to replicate the issue.

Kevin

Mert1296

http://live.datatables.net/wedideba/1/edit

So I put all my includes into the code and I put my JavaScript into the test case. Maybe there is something wrong?

kthorngren

You were getting this error in the console:

jquery.min.js:2 Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

I removed one of your columnDefs configs that was referencing columns not in the table. Now Datatables initializes properly although there is another error unrealted to the issue. Here is the updated example:

http://live.datatables.net/wofiwuri/1/edit

However it is still not working properly. The reason is, since you are using Bootstrap, you need to load the FixedHeader Bootstrap files instead. Plius you had some duplicate CSS and JS files in the example.

Updated with the Datatables and FixedHeader Bootstrap integration files:
http://live.datatables.net/celireva/1/edit

Kevin

Mert1296

Thank yo very much!
The Problem is, I need the second columndefs for child rows.. Isn't it working without removing the columnDefs?

Mert1296

So I removed the includes which you put in comment and also the second columnDef but it still doesn't work.. I really don't know why it's not working

kthorngren

The Problem is, I need the second columndefs for child rows.. Isn't it working without removing the columnDefs?

I'm not saying you need to remove that code from your system. I had to remove it for the test case to run because it is referencing columns that aren't in the test case.

but it still doesn't work.. I really don't know why it's not working

Hard to say. Do you have any errors in your browser's console?

What specifically is not working?

Kevin

Mert1296

Do you have any errors in your browser's console?

Yes:
"The FixedHeader property of an undefined or zero reference cannot be set."

What specifically is not working?

The Header of my DataTable is not fixed..