Basic datatable
The DataTables is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML 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. Searching, ordering, paging etc goodness will be immediately added to the table, as shown in this example. Datatables support all available table styling.
First Name Last Name Job Title DOB Status Actions
Marth Enright Traffic Court Referee 22 Jun 1972 Active
Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
Coy Wollard Customer Service Operator 12 Oct 1982 Active
Maxwell Maben Regional Representative 25 Feb 1988 Suspended
Cicely Sigler Senior Research Officer 15 Mar 1960 Pending
Pagination types
The default page control (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but in some cases you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the pagingType option. Supported pagination types are: simple, simple_numbers, full and full_numbers. This example shows simple pagination type.
First Name Last Name Job Title DOB Status Actions
Marth Enright Traffic Court Referee 22 Jun 1972 Active
Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
Coy Wollard Customer Service Operator 12 Oct 1982 Active
Maxwell Maben Regional Representative 25 Feb 1988 Suspended
Cicely Sigler Senior Research Officer 15 Mar 1960 Pending
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. The duration for which the saved state is valid can be set using the stateDuration initialisation parameter (2 hours by default).
First Name Last Name Job Title DOB Status Actions
Marth Enright Traffic Court Referee 22 Jun 1972 Active
Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
Coy Wollard Customer Service Operator 12 Oct 1982 Active
Maxwell Maben Regional Representative 25 Feb 1988 Suspended
Cicely Sigler Senior Research Officer 15 Mar 1960 Pending
Scrollable datatable
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!.
First Name Last Name Job Title DOB Status Actions
Marth Enright Traffic Court Referee 22 Jun 1972 Active
Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
Coy Wollard Customer Service Operator 12 Oct 1982 Active
Maxwell Maben Regional Representative 25 Feb 1988 Suspended
Cicely Sigler Senior Research Officer 15 Mar 1960 Pending
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless