Display child rows using data table, ajax
Display child rows using data table, ajax
Borrowing liberally from one of the blog posts, I have the following:
function createChild(row) {
var rowData = row.data();
// This is the table we'll convert into a DataTable
var table = $('<table class="display" width="100%"/>');
// Display it the child row
row.child(table).show();
// Child row DataTable configuration, always passes the parent row's id to server
var childStoreTable = table.DataTable({
dom: "lrti",
// pageLength: 5,
"lengthChange": false,
bSort: false,
bInfo: false,
ajax: {
url: "api/getChildRowsStore.php",
type: "post",
data: {
storenumber: passStoreNumber,
startdate: "<?=$saveStartDate?>",
enddate: "<?=$saveEndDate?>",
},
},
columns: [
{data: "StoreNumber"},
{data: "AccountNumber"},
{data: "RecordCount"},
{data: "GrossPrice"},
{data: "CommissionAmt"},
{data: "NetSales"},
{data: "AvgGross"},
{data: "AvgNet"},
],
});
}
// Add event listener for opening and closing child rows
$('#storeTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = storeTable.row(tr);
passStoreNumber = storeTable.cell(row, 1).data();
if (row.child.isShown()) {
// This row is already open - close it
destroyChild(row);
tr.removeClass('shown');
} else {
// Open this row
createChild(row);
tr.addClass('shown');
}
});
The php script listed in the ajax url appears to be returning the data I want, but I am getting the error jquery.datatables.1.10.12.js:4723 Uncaught TypeError: Cannot read property 'length' of undefined
at jquery.datatables.1.10.12.js:4723
at callback (jquery.datatables.1.10.12.js:3850)
at Object.success (jquery.datatables.1.10.12.js:3880)
at u (jquery-3.3.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.3.1.min.js:2)
at k (jquery-3.3.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.3.1.min.js:2)
Can anyone tell me my mistake?
This question has an accepted answers - jump to answer
Answers
It doesn't look like you are creating the
thead
for the child table. You can add it to the string when creating thevar table
on line 6 or you can usecolumns.title
.Kevin