1. Dotan
  2. Data Table

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.

Basic Data Table

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();. 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.

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.

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!).

Scroll - Horizontal

DataTables has the ability to show tables with horizontal scrolling,which is very useful for when you have a wide table,but want to constrain it to a limited horizontal display area.

Row Created Callback

The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display,the createdRow function is called once and once only. It is passed the create row node which can then be modified.

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.

Dotan ©2020 created by Theme-zome