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 .
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;
}
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
Why don't you try fixing your thead th using position: sticky for th .
thead Th {
position: sticky;
z-index: 1;
top: 0;
}
FixedHeader, a datatables extension, can either be:
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
} );