Why my datatable Fixed header doesn`t work /

user_14128818 0
Viewed 3113

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 .

datatable jquery ajax javascript
2 Answers

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

user_141288180

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
} );
user_36280100
Related