Data Tables

Basic data table

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table: pagination, instant search and multi-column ordering. (more details)

Child rows (show extra / detailed information)

The DataTables API has a number of methods available for attaching child rows to a parent row in the DataTable. This can be used to show additional information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table. (more info)

Show / hide columns dynamically

This example shows how you can make use of the column().visible() 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. (more details)

Individual column searching (text inputs)

The searching functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is global, and you may wish to present controls to search on specific columns only. (more details)