39 lines
1.2 KiB
XML
Executable File
39 lines
1.2 KiB
XML
Executable File
<?xml version="1.0" encoding="UTF-8" ?>
|
|
<dt-example table-type="html-details" table-class="display nowrap" order="2">
|
|
|
|
<css lib="datatables responsive" />
|
|
<js lib="jquery datatables responsive">
|
|
<![CDATA[
|
|
|
|
$(document).ready(function() {
|
|
$('#example').DataTable( {
|
|
responsive: {
|
|
details: {
|
|
type: 'column'
|
|
}
|
|
},
|
|
columnDefs: [ {
|
|
className: 'control',
|
|
orderable: false,
|
|
targets: 0
|
|
} ],
|
|
order: [ 1, 'asc' ]
|
|
} );
|
|
} );
|
|
|
|
]]>
|
|
</js>
|
|
|
|
<title lib="Responsive">Column controlled child rows</title>
|
|
|
|
<info><![CDATA[
|
|
|
|
Responsive has two built in methods for displaying the controlling element of the child rows; `inline` which is the default option and 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.
|
|
|
|
This example shows the `r-init responsive.details.type` option set to `column` to activate the control column. Note that by default the first column is used as the control, so additionally in the initialisation the `dt-init order` and `dt-init columns.orderable` options are used to disable sorting on this column.
|
|
|
|
]]></info>
|
|
|
|
</dt-example>
|
|
|