Page length options
It is possible to easily customise the options shown in the length menu using the lengthMenuinitialisation option. This parameter can take one of two forms: 1) A 1Darray of options which will be used for both the displayed option and the value; 2) A 2Darray in which the first array is used to define the value options and the second array the displayed options. The example below shows a 2D array being used to include a "Show all"records option.
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
DOM positioning
Each HTML control element presented by DataTables is denoted by a single character in the domoption. For example the loption is used for the Length changing input option. In this example default DOM positions are mixed by adding correction classes to the parent container: .length-leftto show length on the left side, .filter-rightto show filter on the right etc.
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
Highlighting rows and columns
Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript. This example shows that in action on DataTable by making use of the cell().index(), cells().nodes()and column().nodes()methods.
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
Column rendering
Each column has an optional rendering control called columns.renderwhich can be used to process the content of each cell before the data is used. This example shows the person's age combinedwith their name in the first column, hiding the age column. This technique can be useful for adding links, assigning colours based on content rules and any other form of text manipulation you require. Note:hidden column needs .neverclass to exclude it from the child row.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000