FixedHeader provides the ability to fix in place the header, footer, left and right columns of the table. These are controlled by the options:
top
- default truebottom
- default falseleft
- default falseright
- default falseThis example shows top, left and right enabled with index columns on the left and right.
Note that in such a situation as this, the FixedColumns extension might be more useful, particularly if you want to use the scrolling options built into DataTables.
The Javascript shown below is used to initialise the table shown in this example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | $(document).ready(function() { var table = $('#example').DataTable( { "order": [ 1, 'asc' ], "ajax": "../../../examples/ajax/data/objects.txt", "columns": [ { title: '', data: null, defaultContent: "" }, { title: 'Name', data: "name" }, { title: 'Position', data: "position" }, { title: 'Office', data: "office" }, { title: 'Extn.', data: "extn" }, { title: 'Start date', data: "start_date" }, { title: 'Salary', data: "salary" }, { title: '', data: null, defaultContent: "" } ], initComplete: function () { new $.fn.dataTable.FixedHeader( table, { left: true, right: true } ); } } ); table.on( 'order.dt search.dt', function () { table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) { cell.innerHTML = i+1; } ); table.column(-1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) { cell.innerHTML = i+1; } ); } ).draw(); } ); |
In addition to the above code, the following Javascript library files are loaded for use in this example: