Why my datatable Fixed header doesn`t work /

Question

I am trying to make my data table Thead a sticky one but when i tried fixed header than it doesn't work . I have tried position: fixed; , top: 0; and try to fix it with css but when a done this action than it works in firefox as expected but it doesn't work as expected in crome edge opera .

    "stateSave": false,
    "orderCellsTop": true,
    "fixedHeader": {
        header: true,
    },
    "columns": [
    {'data':'chk_select_header','orderable': false},

Here is my code of ajax .

Pathan

Did you include the fixedHeader.js and fixedHeader.css files on your HTML page? datatables.net/extensions/fixedheader/examples/options/… – Orianna

Yes I did but it is still not working – Pathan

I want my html body fixed and when i scroll table body down i want my thead as in sticky position . This option may Fix the table header to the top of a scrolling window but i wanted it in the top of table – Pathan

I want to make my datatable look like this without using this plugin jqueryscript.net/demo/… – Pathan

Answer 1

I had tried to fixed my thead here in my data table . But this data table fixed that thead to the top of there page like this https://datatables.net/extensions/fixedheader/examples/options/simple.html but i wanted to make sticky to that data table div . i found only way to do it is using this below CSS method

thead tr:first-child th {
    position: sticky;
    z-index: 12;
    top: 0;
    background: white;
}

Or

thead th {
    position: sticky;
    z-index: 12;
    top: 51px;
    background: white;
}

This is the simplest method to sticky your data table header to the table head

Pathan

Thank you for your answer, i learned something abouth sticky position. It works great, the only problem is that there is no stuck event when the thead sticks. – Turino

Answer 2

you can simply add headeroffset
fixedHeader: { header: true, headerOffset: $('#navbar').height() } or

fixedHeader: {
        header: true,
        headerOffset: 120
    }

this will be enough

docs: https://datatables.net/extensions/fixedheader/examples/options/offset.html

Imponderable

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Saprophyte

Answer 3

FixedHeader, a datatables extension, can either be:

• downloaded in bundle here: in download builder; or
• it can be included on your page as individual files ref. here. Files for FixedHeader : CSS, JS

This functionality is inbuilt in the extension, nothing separate needs to be done with CSS etc. Here is how it is initialized:

$('#myTable').DataTable( {
    fixedHeader: true
} );

Or, after datatable has been constructed, it can be added using new keyword with the $.fn.dataTable.FixedHeader function:

var table = $('#myTable').DataTable();
new $.fn.dataTable.FixedHeader( table, {
    // more options
} );

Prismoid