This example shows how multiple tables can be initialised with DataTables and TableTools in a single call to the $().DataTable() function.
- Basically it works as you would expect - no special considerations need be made!
| 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() {
- $('#example').DataTable( {
- dom: 'T<"clear">lfrtip'
- } );
-} );
-
- 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.
-