ColVis example Two tables with shared controls

This example shows how the DataTables API can be used with ColVis to use a single ColVis control to effect other tables. This is done by applying ColVis to the first table and then listening for the column-visibilityDT event and updating all other tables when triggered.

This example makes use of the tables()DT and table()DT methods for working with multiple tables, and also initialised ColVis using the new $.fn.dataTable.ColVis(); operator.

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 tables = $('table.display').DataTable( { displayLength: 5 } ); // When the column visibility changes on the firs table, also change it on // the others tables.table(0).on('column-visibility', function ( e, settings, colIdx, visibility ) { tables.tables(':gt(0)').column( colIdx ).visible( visibility ); } ); // Create ColVis on the first table only var colvis = new $.fn.dataTable.ColVis( tables.table(0) ); $( colvis.button() ).insertAfter('div.info'); } );

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.