table_dynamic.js
1.84 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
51
52
$(function () {
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
sOut += '<tr><td>Rendering engine:</td><td>' + aData[1] + ' ' + aData[4] + '</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
return sOut;
}
/* Insert a 'details' column to the table */
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<i class="fa fa-plus-square-o"></i>';
nCloneTd.className = "center";
$('#table2 thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
$('#table2 tbody tr').each(function () {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});
/* Initialse DataTables, with no sorting on the 'details' column */
var oTable = $('#table2').dataTable({
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0]
}],
"aaSorting": [
[1, 'asc']
]
});
/* Add event listener for opening and closing details */
$(document).on('click', '#table2 tbody td i', function () {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
/* This row is already open - close it */
$(this).removeClass().addClass('fa fa-plus-square-o');
oTable.fnClose(nTr);
} else {
/* Open this row */
$(this).removeClass().addClass('fa fa-minus-square-o');
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});
});