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