1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<?xml version="1.0" encoding="UTF-8" ?>
<dt-api group="rows">
<name>row().child().show()</name>
<summary>Make newly defined child rows visible</summary>
<since>1.10</since>
<type type="function">
<signature>row().child().show()</signature>
<description>Show the child row(s) of a parent row</description>
<returns type="DataTables.Api">DataTables API instance.</returns>
</type>
<description>
This method can be used to make the child rows of a parent row visible at any time. Child rows can be attached using `dt-api row().child()` but do not have to be made immediately visible. This method provides the option of making those child rows which have already been attached visible.
Please note that this method is only available when `dt-api row().child()` is called with a parameter set. This is because `dt-api row().child()` will return the child rows if called with no parameters, which is either a `-type jQuery` object or `-type undefined`. When called with a parameter `dt-api row().child()` returns a `-type DataTables.Api` instance. If you need to display a child row without any parameters being set use `dt-api row().child.show()`.
Unlike many of the other methods which manipulate the DataTable, this method does not require `dt-api draw()` to be called for the resulting change to be displayed. The child row(s) are inserted into the table without requiring that DataTables redraw.
</description>
<example title="Show / hide a row based on its current state, adding the row content as needed."><![CDATA[
var table = $('#example').DataTable();
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).parents('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row (the format() function would return the data to be shown)
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
]]></example>
</dt-api>
|
