Basic initialization
Select is an extension for DataTables that provides table item selection capabilities. In
its most simple form it can be enabled on a DataTable by setting the
select
option to be true
. This will enable Select with all of its default options -
row selection which is performed using the os
method (click to select a single
item, cmd/ctrl to add and remove items or shift to select a range of
items).
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 |
Single item selection
This example shows the single item selection option. Here only a single
item can be selected, any other selected items will be automatically deselected when a new
item is selected. The
select.style
option provides the ability to control how
items are selected in the table. It is a string
that can be used with one of
the following options: single
- single item selection, multi
-
multiple items selection, os
- OS style selection.
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 |
Multiple items selection
This example shows the multi option. The
select.style
option
provides the ability to control how items are selected in the table. It is a
string
that can be used with one of the following options: single
- single item selection, multi
- multiple items selection, os
- OS
style selection. Note how a click on a row will toggle its selected state without effecting
other rows, unlike the os and single options shown in other examples.
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 |
Checkbox selection
A selected row is typically shown in a DataTable by using a highlight background colour -
however, it can also be useful to use other styling options to convey the selected state of
items in a table to the end user. The checkbox is not an
<input type="checkbox">
element, but rather a CSS that uses the
:before
and :after
pseudo elements of the cell to draw a box and
the tick. This can therefore be easily modified to suit the style of your site/app.
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 |
Control buttons
Buttons that can be used with the Buttons extension. Buttons is a framework
providing common options, styling and API methods for buttons that can control a DataTable.
Available buttons:
selected
- enabled only when one or more items are selected,
selectedSingle
- enabled only when a single item is selected,
selectAll
- select all, selectNone
- deselect all,
selectRows
- select rows, selectColumns
- select columns and
selectCells
- select cells.
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 |