Couldn't make Child Rows work.
Couldn't make Child Rows work.
ngungo
Posts: 64Questions: 23Answers: 2
I tried to implement child rows for 2 days unsuccesfully. Any help will be appeciated.
The page is cochin.us/cookie
Here's the error:
jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property 'style' of undefined
at Ha (https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js:62:200)
at ha (https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js:48:286)
at e (https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js:93:32)
at HTMLTableElement.<anonymous> (https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js:93:118)
at Function.each (http://code.jquery.com/jquery-1.12.4.js:370:19)
at jQuery.fn.init.each (http://code.jquery.com/jquery-1.12.4.js:137:17)
at jQuery.fn.init.m [as dataTable] (https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js:82:462)
at jQuery.fn.init.h.fn.DataTable (https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js:167:49)
at HTMLDocument.<anonymous> (http://cochin.us/cookie/js/table.cases.js:71:26)
at fire (http://code.jquery.com/jquery-1.12.4.js:3232:31)Ha @ jquery.dataTables.min.js:62ha @ jquery.dataTables.min.js:48e @ jquery.dataTables.min.js:93(anonymous function) @ jquery.dataTables.min.js:93each @ jquery-1.12.4.js:370each @ jquery-1.12.4.js:137m @ jquery.dataTables.min.js:82h.fn.DataTable @ jquery.dataTables.min.js:167(anonymous function) @ table.cases.js:71fire @ jquery-1.12.4.js:3232fireWith @ jquery-1.12.4.js:3362ready @ jquery-1.12.4.js:3582completed @ jquery-1.12.4.js:3617
Here's HTML:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/jq-2.1.4,dt-1.10.10,b-1.1.0,b-html5-1.1.0,se-1.1.0/datatables.min.css">
<link rel="stylesheet" type="text/css" href="css/generator-base.css">
<link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
<style>
,,,
td.details-control {
background: url('images/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('images/details_close.png') no-repeat center center;
}
</style>
<!-- script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/s/dt/jq-2.1.4,dt-1.10.10,b-1.1.0,b-html5-1.1.0,se-1.1.0/datatables.min.js"></script -->
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/table.cases.js"></script>
</head>
<body class="dataTables"></br>
<div class="container" style="max-width:95%">
<table cellpadding="0" cellspacing="0" border="0" class="display responsive" id="cases">
<thead>
<tr>
<th>Key</th>
<!-- th>Case #</th>
<th>Inv.ID</th -->
<th style="min-width:140px">Name</th>
<th style="min-width:120px">Cat.PD</th>
<th style="max-width:30px;">Paid</th>
<th style="max-width:30px;"></th>
<th style="max-width:90%; text-align:left;">Comments</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<!-- th></th>
<th></th -->
<th style="min-width:140px"></th>
<th style="min-width:120px"></th>
<th style="max-width:30px; color:red; font-weight:normal"></th>
<th style="max-width:30px;"></th>
<th style="max-width:90%;"></th>
</tr>
</tfoot>
</table>
</div>
</body>
Here's js
(function($){
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
// console.log(d);
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Case #:</td>'+
'<td>'+d.caseNum+'</td>'+
'</tr>'+
'<tr>'+
'<td>Inv.ID:</td>'+
'<td>'+d.invID+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.cases.php',
table: '#cases',
fields: [
{
"label": "x",
"name": "x",
def: ""
},
{
"label": "Case #",
"name": "caseNum"
},
{
"label": "Inv.ID",
"name": "invID"
},
{
"label": "Name",
"name": "name"
},
{
"label": "Cat.PD",
"name": "catPD"
},
{
"label": "Paid",
"name": "paid"
},
{
"label": "UnPd",
"name": "unPd"
},
{
"label": "Comments",
"name": "comments",
"type": "textarea"
}
]
} );
var table = $('#cases').DataTable( {
dom: 'Bfrtip',
scrollX: "100%",
// scrollY: "100%",
// scrollCollapse: true,
scrollY: window.innerHeight-39-41-37-31-25-15,
responsive: true,
paging: false,
ajax: 'php/table.cases.php',
aaSorting: [[0,'asc'], [1,'asc'], [3,'asc'], [4,'asc']],
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
},
{
"data": "x"
},
// {
// "data": "caseNum"
// },
// {
// "data": "invID"
// },
{
"data": "name"
},
{
"data": "catPD"
},
{
"data": "paid"
},
{
"data": "unPd"
},
{
"data": "comments"
}
],
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// console.log(!isNaN(aData["x"]));
// if ($(nRow).hasClass("selected")) alert('Hello'); // Not working AA3939
if (aData["x"] === "") $(nRow).css('color', '#008000');
else if (aData["x"].indexOf("0") == 0) $(nRow).css('color', '#E6A500');
else if (aData["x"].indexOf("8") == 0) $(nRow).css('color', '#AA3939');
else if (aData["x"].indexOf("9") == 0) $(nRow).css('color', '#AA3939');
else if (aData["x"].indexOf("Act") > -1) $(nRow).css('color', '#0a24a5');
else if (aData["x"].indexOf("Act9") > -1) $(nRow).css('color', 'black');
else if (aData["x"].indexOf("zzzz") > -1) $(nRow).css('color', '#aaa');
else if (aData["x"].indexOf("Xong") > -1) $(nRow).css('color', '#ff5858');
else if (aData["x"].indexOf("Next") > -1) $(nRow).css('color', '#008000');
else if (aData["x"].indexOf("xyz") == 0) {
$(nRow).css('background-color', 'beige');
$(nRow).css('font-weight', 'normal');
$(nRow).css('color', 'brown');
}
},
"footerCallback": function(row, data, start, end, display) {
var api = this.api(), data;
$(api.column(3).footer()).html('bill');
function toNum(n, currency) {
return currency + n.toFixed(0).replace(/./g, function(c, i, a) {
return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
});
}
// Remove the formatting to get integer data for summation
var intVal = function(i) {
return typeof i === 'string' ?
i.replace(/[\$,-]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over this page
total5 = api
.column(3, {page: 'current'})
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
total6 = api
.column(4, {page: 'current'})
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer
$(api.column(3).footer()).html(
toNum(total5, "$")+' ('+toNum(total6, "$")+' billable)'
);
},
"columnDefs": [
{className: "name", "targets": [1]},
{className: "paid", "targets": [3, 4]}
],
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
],
select: true,
lengthChange: false
});
// Add event listener for opening and closing details
$('#cases tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('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
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
});
}(jQuery));
This question has accepted answers - jump to:
This discussion has been closed.
Answers
At the moment you are getting an error:
Which is coming from the fact that the HTML has 6 columns, but the
columnsarray defines 7. They need to match.Allan
Thanks Allan!
I got that fixed. That was careless.
See this webpage
Now I got an unpleasant cosmetic error. It inserts the text '[object Object]' into the cells of the first column. But if I change the data to a blank or anything I got warnings. Another hint, please.
For example:
Use:
For that column.
Allan