DataTables example Show / hide columns dynamically
This example shows how you can make use of the column().visible()DT API method to dynamically show and
hide columns in a table. Also included here is scrolling, just to show it enabled with this API method,
although that is not required for the API function to work.
In addition to this, groups of columns can be shown and hidden at the same time using the columns()DT method to select multiple columns and then
using the columns().visible()DT method to set their state.
If you are looking for a more complete column visibility interaction controls ColVis for DataTables provides a complete interface for
allowing the user to show and hide columns in the table.
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.