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