The Responsive
extension for DataTables can be applied to a DataTable in one of two ways; with a specific class name
on the table, or using the DataTables initialisation options. This method shows the latter, with the responsive
option being set to the boolean value true
. The responsive
option can be given as a boolean value, or as an object with configuration options.
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 |
|
Responsive has two built in methods for displaying the controlling element of the child rows; inline
(default) option shows the control in the first column, and column
which set a control column as the control. The control column is shown only when there is some other column hidden, and is dedicated only to the show/hide
control for the rows.
|
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 |
|
When using the column
child row control type, Responsive has the ability to use any column or element as the show/hide control for the row details. This is provided through the responsive.details.target
option, which can be either a column index, or a jQuery selector. This example shows the last
column in the table being used as the control 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 |
|
|
When using the column
details type in Responsive the responsive.details.target
option provides the ability to control what element is used to show/hide the child rows when the table is collapsed. This example uses the tr
selector to have the whole row act as the control.
|
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 |
|