- Main
- Dashboard No active orders
- Layouts
- Themes
- Starter kit
- Changelog 2.3
- RTL version
- Forms
- Form components
- JSON forms
- Text editors
- Pickers
- Form layouts
- Components
- Basic components
- Content styling
- Extra components
- Color system
- Animations
- Icons
- Layout
- Page layouts
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Menu levels
- Data visualization
- Echarts library
- D3 library
- C3 library
- Google charts
- Maps integration
- Extensions
- Extensions
- JQuery UI
- File uploaders
- Event calendars
- Internationalization
- Tables
- Basic tables
- Data tables
- Data tables extensions
- Responsive tables
- Page kits
- General pages
- Service pages
- User pages
- Application pages
- Widgets
It is possible to easily customise the options shown in the length menu using the
lengthMenu
initialisation option. This parameter can take one of two forms: 1) A 1D
array of options which will be used for both the displayed option and the value; 2) A 2D
array 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 |
---|---|---|---|---|---|
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | |
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | |
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending | |
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | |
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | |
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | |
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | |
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | |
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | |
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending |
Each HTML control element presented by DataTables is denoted by a single character in the
dom
option. For example the l
option is used for the L
ength changing input option. In this example default DOM positions are mixed by adding correction classes to the parent container: .length-left
to show length on the left side, .filter-right
to show filter on the right etc.
First Name | Last Name | Job Title | DOB | Status | Actions |
---|---|---|---|---|---|
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | |
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | |
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending | |
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | |
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | |
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | |
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | |
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | |
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | |
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending |
Showing 1 to 10 of 15 entries
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 |
---|---|---|---|---|---|
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | |
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | |
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending | |
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | |
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | |
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | |
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | |
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | |
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | |
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending |
Each column has an optional rendering control called
columns.render
which can be used to process the content of each cell before the data is used. This example shows the person's age combined
with 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 .never
class to exclude it from the child row.
Name | Position | Office | Start date | Salary |
---|---|---|---|---|
Airi Satou (33) | Accountant | Tokyo | 2008/11/28 | $162,700 |
Ashton Cox (66) | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
Brielle Williamson (61) | Integration Specialist | New York | 2012/12/02 | $372,000 |
Cedric Kelly (22) | Senior Javascript Developer | Edinburgh | 2012/03/29 | $433,060 |
Charde Marshall (36) | Regional Director | San Francisco | 2008/10/16 | $470,600 |
Colleen Hurst (39) | Javascript Developer | San Francisco | 2009/09/15 | $205,500 |
Garrett Winters (63) | Accountant | Tokyo | 2011/07/25 | $170,750 |
Haley Kennedy (43) | Senior Marketing Designer | London | 2012/12/18 | $313,500 |
Herrod Chandler (59) | Sales Assistant | San Francisco | 2012/08/06 | $137,500 |
Jena Gaines (30) | Office Manager | London | 2008/12/19 | $90,560 |
© 2015 - 2018. Limitless Web App Kit by Eugene Kopyov