mirror of
https://github.com/billz/raspap-webgui.git
synced 2023-10-10 13:37:24 +02:00
64 lines
2.1 KiB
XML
64 lines
2.1 KiB
XML
|
<?xml version="1.0" encoding="UTF-8" ?>
|
||
|
|
<dt-option group="responsive">
|
||
|
|
<name>responsive.details.target</name>
|
||
|
|
<summary>Column / selector for child row display control when using `column` details type</summary>
|
||
|
|
<since>Responsive 1.0.0</since>
|
||
|
|
|
||
|
|
<type type="number">
|
||
|
|
<description>
|
||
|
|
<![CDATA[
|
||
|
|
Column index to which the show / hide control should be attached. This can be `>=0` to count columns from the left, or `<0` to count from the right.
|
||
|
|
|
||
|
|
Please note that the column defined here should have the class `-string control` added to it. This allows the Responsive CSS to display a control icon to the end user.
|
||
|
|
]]>
|
||
|
|
</description>
|
||
|
|
</type>
|
||
|
|
|
||
|
|
<type type="string">
|
||
|
|
<description>
|
||
|
|
As a string, this option is used as a jQuery selector to determine what element(s) will activate the show / hide control for the details child rows. This provides the ability to use any element in a table - for example you can use the whole row, or a single `-tag img` element in the row.
|
||
|
|
</description>
|
||
|
|
</type>
|
||
|
|
|
||
|
|
<default value="0"/>
|
||
|
|
|
||
|
|
<description>
|
||
|
|
When the `column` type is selected for the `r-init responsive.details.type` option, this option provides the ability to control what element in the table will activate the show / hide control in each row. This can be one of an column index, or a jQuery selector, as detailed below.
|
||
|
|
|
||
|
|
If the `inline` option is used for `r-init responsive.details.type` this option has no effect.
|
||
|
|
|
||
|
|
Please note that as with all other configuration options for Responsive, this option is an extension to the [default set of DataTables options](/reference/init). This property should be set in the DataTables initialisation object.
|
||
|
|
</description>
|
||
|
|
|
||
|
|
<example title="Use the `column` control type and target the right most column"><![CDATA[
|
||
|
|
|
||
|
|
$('#example').DataTable( {
|
||
|
|
responsive: {
|
||
|
|
details: {
|
||
|
|
type: 'column',
|
||
|
|
target: -1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
columnDefs: [ {
|
||
|
|
className: 'control',
|
||
|
|
orderable: false,
|
||
|
|
targets: -1
|
||
|
|
} ]
|
||
|
|
} );
|
||
|
|
|
||
|
|
]]></example>
|
||
|
|
|
||
|
|
<example title="Use the whole row to show / hide the details row"><![CDATA[
|
||
|
|
|
||
|
|
$('#example').DataTable( {
|
||
|
|
responsive: {
|
||
|
|
details: {
|
||
|
|
type: 'column',
|
||
|
|
target: 'tr'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} );
|
||
|
|
|
||
|
|
]]></example>
|
||
|
|
|
||
|
|
</dt-option>
|