DataTables
This site contains the legacy documentation for DataTables v1.9 and earlier for reference only.
DataTables 1.9 was End Of Life in 2014. Do not use it for new work.
The current release of DataTables can always be found on DataTables.net.
DataTables 1.9 was End Of Life in 2014. Do not use it for new work.
The current release of DataTables can always be found on DataTables.net.
Styling information
The key to styling DataTables is the 'id' attribute that you give the table in question. Any HTML added to the page will have this id with a postfix (e.g. _info). The following ID's and classes will be applied:
| Feature | ID | Class |
|---|---|---|
| Processing indicator | *_processing | dataTables_processing |
| Information: By default inserted before the table (can be changed by using the sDom parameter). | ||
| Change display length | *_length | dataTables_length |
| Information: By default inserted before the table (can be changed by using the sDom parameter). | ||
| Filter | *_filter | dataTables_filter |
| Information: By default inserted before the table (can be changed by using the sDom parameter). | ||
| Pagination | *_paginate | dataTables_paginate |
| Information: By default inserted after the table (can be changed by using the sDom parameter). | ||
| Pagination | *_previous | paginate_disabled_previous paginate_enabled_previous |
| Pagination | *_next | paginate_disabled_next paginate_enabled_next |
| Display information | *_info | dataTables_info |
| Information: By default inserted after the table (can be changed by using the sDom parameter). | ||
| Sorting (headers) | sorting_asc sorting_desc |
|
| Information: Applied to the TH in the table header | ||
| Sorting (columns) | sorting_1 sorting_2 sorting_3 |
|
| Information: Applied to the TD's in the column which is being sorted upon. The '_1', '_2' and '_3' prefix is applied for multi-column sorting in priority order. | ||
| General | *_wrapper | dataTables_wrapper |
| Information: General wrapper div element around the table | ||
| Zero records found cell | dataTables_empty | |
| Information: This class name is applied to the table cell which reports that 'zero records' have been found. This cell is dynamically created by DataTables, so this class is applied to allow extra styling. | ||