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.
-