By default, TableTools' row selector option will register a row selection click on any part of the row. Although this is often desirable, you might wish at + times to limit the row selection to just a single column, or other elements in the row. This might be useful, for example, with Editor's inline editing, so you don't select the row on click of a cell that is to be edited.
+ +The sRowSelector method provides this ability, allowing a custom jQuery selector to be passed in. TableTools will use the parent row of any element
+ that is selected by the end user.
In this case, the row selector is attached to the cells in the first column of the table, and Font + Awesome is used to display a checkbox indicating the selection state of the row, in addition to the row background colouring.
+| + + | Name | +Position | +Office | +Age | +Start date | +Salary | +
|---|
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
+ $('#example').DataTable( {
+ ajax: "../../../examples/ajax/data/objects.txt",
+ columns: [
+ { data: null, defaultContent: '', orderable: false },
+ { data: 'name' },
+ { data: 'position' },
+ { data: 'office' },
+ { data: 'extn' },
+ { data: 'start_date' },
+ { data: 'salary' }
+ ],
+ order: [ 1, 'asc' ],
+ dom: 'T<"clear">lfrtip',
+ tableTools: {
+ sRowSelect: 'os',
+ sRowSelector: 'td:first-child',
+ aButtons: [ 'select_all', 'select_none' ]
+ }
+ } );
+} );
+
+ In addition to the above code, the following Javascript library files are loaded for use in this example:
+ + +The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
+This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The + additional CSS used is shown below:
tr td:first-child {
+ text-align: center;
+ }
+
+ tr td:first-child:before {
+ content: "\f096"; /* fa-square-o */
+ font-family: FontAwesome;
+ }
+
+ tr.selected td:first-child:before {
+ content: "\f046"; /* fa-check-square-o */
+ }
+ The following CSS library files are loaded for use in this example to provide the styling of the table:
+ + +This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is + loaded.
+The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.
+