DataTables example Multiple tables

Often you might wish to initialise multiple tables with a single statement. This is trivially done by using a jQuery selector which will pick up multiple tables.

The tables are independent for user control (i.e. user controlled paging on one table does not effect the others), but they do share the initialisation parameters given (for example if you specific the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to manipulate both together, or independently.

The example below shows two tables initialised with a single line of code, through the use of the table.display selector (i.e. select all elements which have the class of table.display (which is suitable in this example, you might wish to use a different selector).

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


$(document).ready(function() { $('table.display').dataTable(); } );




div.dataTables_wrapper { margin-bottom: 3em; }


