Data Tables
Default Datatable
DataTables has most features enabled by
default, so all you need to do to use it with your own tables is to call
the construction function: $().DataTable();.
Buttons Example
The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. The core library provides the based framework upon which plug-ins can built.
Multi item selection
This example shows the multi option. Note how a click on a row will toggle its selected state without effecting other rows, unlike the os and single options shown in other examples.
Key Data Table
KeyTable provides Excel like cell navigation on any table. Events (focus, blur, action etc) can be assigned to individual cells, columns, rows or all cells.
Alternative Pagination
The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are cases where you may wish to customise the options presented to the end user.
Scroll - Vertical
This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled as well!).
Complex headers with column visibility
Complex headers (using colspan / rowspan) can be used to group columns of similar information in DataTables, creating a very powerful visual effect.
| Name | HR Information | Contact | ||
|---|---|---|---|---|
| Position | Salary | Office | Extn. | |
| Airi Satou | Accountant | $162,700 | Tokyo | 5407 |
| Angelica Ramos | Chief Executive Officer (CEO) | $1,200,000 | London | 5797 |
| Ashton Cox | Junior Technical Author | $86,000 | San Francisco | 1562 |
| Bradley Greer | Software Engineer | $132,000 | London | 2558 |
| Brenden Wagner | Software Engineer | $206,850 | San Francisco | 1314 |
| Brielle Williamson | Integration Specialist | $372,000 | New York | 4804 |
| Bruno Nash | Software Engineer | $163,500 | London | 6222 |
| Caesar Vance | Pre-Sales Support | $106,450 | New York | 8330 |
| Cara Stevens | Sales Assistant | $145,600 | New York | 3990 |
| Cedric Kelly | Senior Javascript Developer | $433,060 | Edinburgh | 6224 |
| Name | Position | Salary | Office | Extn. |
State Saving
DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads a page, or comes back to the page after visiting a sub-page. This state saving ability is enabled by the stateSave option.
