65 lines
2.4 KiB
XML
Executable File
65 lines
2.4 KiB
XML
Executable File
<?xml version="1.0" encoding="UTF-8" ?>
|
|
<dt-option group="responsive">
|
|
<name>responsive.details.renderer</name>
|
|
<summary>Define the renderer used to display the child rows</summary>
|
|
<since>Responsive 1.0.0</since>
|
|
|
|
<type type="function">
|
|
<signature>renderer( api, rowIdx )</signature>
|
|
<parameter type="DataTables.Api" name="api">
|
|
DataTables API instance for the table in question
|
|
</parameter>
|
|
<parameter type="integer" name="rowIdx">
|
|
Row index for the row that the renderer is being asked to render. Use the `dt-api row()` and / or `dt-api cells()` methods to get information from the API about the row so the information can be rendered.
|
|
</parameter>
|
|
<returns type="boolean|string">
|
|
Two values can be returned:
|
|
|
|
* `-type boolean` `false` - Do not display a child row
|
|
* `-type string` - The information to be shown in the child row, including any required HTML.
|
|
</returns>
|
|
</type>
|
|
|
|
<default value="function">
|
|
Function that will display the hidden information in a `-tag ul/li` list.
|
|
</default>
|
|
|
|
<description>
|
|
The information contained in the details rows that are displayed by Responsive are created through this function. By default it will create a `-tag ul/li` list showing the data from cells that are hidden, but you can provide a custom function that will create a child row containing whatever information you wish to display.
|
|
|
|
This function is executed for every child row in a table, and is run whenever the column visibility of the table changes.
|
|
|
|
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="Custom renderer which displays the data that has been hidden in an HTML table"><![CDATA[
|
|
|
|
$('#example').DataTable( {
|
|
responsive: {
|
|
details: {
|
|
renderer: function ( api, rowIdx ) {
|
|
// Select hidden columns for the given row
|
|
var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
|
|
var header = $( api.column( cell.column ).header() );
|
|
|
|
return '<tr>'+
|
|
'<td>'+
|
|
header.text()+':'+
|
|
'</td> '+
|
|
'<td>'+
|
|
api.cell( cell ).data()+
|
|
'</td>'+
|
|
'</tr>';
|
|
} ).toArray().join('');
|
|
|
|
return data ?
|
|
$('<table/>').append( data ) :
|
|
false;
|
|
}
|
|
}
|
|
}
|
|
} );
|
|
|
|
]]></example>
|
|
|
|
</dt-option> |