Display child rows using data table, ajax
Display child rows using data table, ajax
in DataTables
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
This discussion has been closed.
Answers
It doesn't look like you are creating the
theadfor the child table. You can add it to the string when creating thevar tableon line 6 or you can usecolumns.title.Kevin