Victoria Baker
 Santa Ana, CA

Datatables - Select

Statistics Invoices Schedule
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
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
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
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
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
© 2015. Limitless Web App Kit by Eugene Kopyov