Default ordering
With DataTables you can alter the ordering characteristics of the table at initialisation time. Using the order initialisation parameter, you can set the table to display the data in exactly the order that you want. The order parameter is an array of arrays where the first value of the inner array is the column to order on, and the second is 'asc' or 'desc' as required. The table below is ordered (descending) by the DOB column.
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
Multi column ordering
DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways: - user shift click on a column; - on a per-column basis; - using the columns.orderData option. The example below shows the first column having a secondary order applied to the second column in the table, vice-versa for the second column being tied directly to the first and the salary column to the first name column.
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
Order direction sequence control
At times you may wish to change the default ordering direction sequence for columns to be 'descending' rather than default ascending. This can be done through the use of the columns.orderSequence initialisation parameter. The example below shows: Columns 1, 2 - default ordering; Column 3 - ascending ordering only; Column 4 - descending ordering, followed by ascending and then ascending again; Column 5 - descending ordering only.
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
Complex headers with sorting
Complex headers (using colspan / rowspan) can be used to group columns of similar information in DataTables, creating a very powerful visual effect. In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when working with hidden columns. The example below shows a header spanning multiple cells over the contact information with sorting, with one of the columns that the span covers being hidden.
Name HR Information Contact
Position Salary Office Extn. E-mail
Tiger Nixon System Architect $320,800 Edinburgh 5421 t.nixon@datatables.net
Garrett Winters Accountant $170,750 Tokyo 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author $86,000 San Francisco 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer $433,060 Edinburgh 6224 c.kelly@datatables.net
Airi Satou Accountant $162,700 Tokyo 5407 a.satou@datatables.net
Brielle Williamson Integration Specialist $372,000 New York 4804 b.williamson@datatables.net
Herrod Chandler Sales Assistant $137,500 San Francisco 9608 h.chandler@datatables.net
Rhona Davidson Integration Specialist $327,900 Tokyo 6200 r.davidson@datatables.net
Colleen Hurst Javascript Developer $205,500 San Francisco 2360 c.hurst@datatables.net
Sonya Frost Software Engineer $103,600 Edinburgh 1667 s.frost@datatables.net
Jena Gaines Office Manager $90,560 London 3814 j.gaines@datatables.net
Quinn Flynn Support Lead $342,000 Edinburgh 9497 q.flynn@datatables.net
Charde Marshall Regional Director $470,600 San Francisco 6741 c.marshall@datatables.net
Haley Kennedy Senior Marketing Designer $313,500 London 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick Regional Director $385,750 London 1965 t.fitzpatrick@datatables.net
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