The following example shows two DataTables enhanced tables both with FixedHeader enabled on them. + This is done simply by initialising FixedHeader on each table. This example also shows the footer being + fixed in place for the two tables.
+| Name | +Position | +Office | +Age | +Salary | +
|---|---|---|---|---|
| Name | +Position | +Office | +Age | +Salary | +
| Tiger Nixon | +System Architect | +Edinburgh | +61 | +$320,800 | +
| Cedric Kelly | +Senior Javascript Developer | +Edinburgh | +22 | +$433,060 | +
| Sonya Frost | +Software Engineer | +Edinburgh | +23 | +$103,600 | +
| Quinn Flynn | +Support Lead | +Edinburgh | +22 | +$342,000 | +
| Dai Rios | +Personnel Lead | +Edinburgh | +35 | +$217,500 | +
| Gavin Joyce | +Developer | +Edinburgh | +42 | +$92,575 | +
| Martena Mccray | +Post-Sales support | +Edinburgh | +46 | +$324,050 | +
| Jennifer Acosta | +Junior Javascript Developer | +Edinburgh | +43 | +$75,650 | +
| Shad Decker | +Regional Director | +Edinburgh | +51 | +$183,000 | +
| Name | +Position | +Office | +Age | +Salary | +
|---|---|---|---|---|
| Name | +Position | +Office | +Age | +Salary | +
| Jena Gaines | +Office Manager | +London | +30 | +$90,560 | +
| Haley Kennedy | +Senior Marketing Designer | +London | +43 | +$313,500 | +
| Tatyana Fitzpatrick | +Regional Director | +London | +19 | +$385,750 | +
| Michael Silva | +Marketing Designer | +London | +66 | +$198,500 | +
| Bradley Greer | +Software Engineer | +London | +41 | +$132,000 | +
| Angelica Ramos | +Chief Executive Officer (CEO) | +London | +47 | +$1,200,000 | +
| Suki Burks | +Developer | +London | +53 | +$114,500 | +
| Prescott Bartlett | +Technical Author | +London | +27 | +$145,000 | +
| Timothy Mooney | +Office Manager | +London | +37 | +$136,200 | +
| Bruno Nash | +Software Engineer | +London | +38 | +$163,500 | +
| Hermione Butler | +Regional Director | +London | +47 | +$356,250 | +
| Lael Greer | +Systems Administrator | +London | +21 | +$103,500 | +
The Javascript shown below is used to initialise the table shown in this + example:
$(document).ready(function() {
+ var t1 = $('table.display').eq(0).DataTable();
+ new $.fn.dataTable.FixedHeader( t1, {
+ bottom: true
+ } );
+
+ var t2 = $('table.display').eq(1).DataTable();
+ new $.fn.dataTable.FixedHeader( t2, {
+ bottom: true
+ } );
+} );
+
+ In addition to the above code, the following Javascript library files are loaded for use in this + example:
+ + +The HTML shown below is the raw HTML table element, before it has been enhanced by + DataTables:
+This example uses a little bit of additional CSS beyond what is loaded from the library + files (below), in order to correctly display the table. The additional CSS used is shown + below:
The following CSS library files are loaded for use in this example to provide the styling of the + table:
+ + +This table loads data by Ajax. The latest data that has been loaded is shown below. This data + will update automatically as any additional data is loaded.
+The script used to perform the server-side processing for this table is shown below. Please note + that this is just an example script using PHP. Server-side processing scripts can be written in any + language, using the protocol described in the + DataTables documentation.
+