mirror of https://github.com/ColorlibHQ/gentelella
74 lines
2.2 KiB
XML
Executable File
74 lines
2.2 KiB
XML
Executable File
<?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>
|