12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <?xml version="1.0" encoding="UTF-8" ?>
- <dt-example table-type="html" order="1">
-
- <css lib="datatables tabletools font-awesome">
- 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 */
- }
- </css>
- <js lib="jquery datatables tabletools">
- <![CDATA[
-
- $(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' ]
- }
- } );
- } );
- ]]>
- </js>
-
- <title lib="TableTools">Row selection - row selector on specific cells</title>
-
- <info>< 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](http://fortawesome.github.io/Font-Awesome) is used to display a checkbox indicating the selection state of the row, in addition to the row background colouring.
-
- ]]></info>
-
- <custom-table>
- <table id="example" class="display" cellspacing="0" width="100%">
- <thead>
- <tr>
- <th></th>
- <th>Name</th>
- <th>Position</th>
- <th>Office</th>
- <th>Age</th>
- <th>Start date</th>
- <th>Salary</th>
- </tr>
- </thead>
- </table>
- </custom-table>
-
- </dt-example>
|