custom-renderer.xml
1.48 KB
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
43
44
45
46
47
48
49
50
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display nowrap" order="5">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#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;
}
}
}
} );
} );
]]>
</js>
<title lib="Responsive">Custom child row renderer</title>
<info><![CDATA[
The child row's for a collapsed table in Responsive, by default, show a `-tag ul/li` list of the data from the hidden columns. The `r-init responsive.details.renderer` option provide the ability to create your own custom renderer. It is given two parameters: the DataTables API instance for the table and the row index to use.
This example shows the `dt-api cells()` method being used to select the hidden columns and constructing a table of the data. You could refine the selector to select only certain columns, or show all columns, etc.
]]></info>
</dt-example>