We Keep Coding

How to create nested datatable from JSON array object response

I get API response in JSON format with nested arrays in it. I want to parse it in nested datatable. I've tried for this, but it won't work. Can anyone let me know where I made a mistake. In JSON I have passenger data & each passenger having multiple drivers, I want to show it in datatable in nested format, like Passenger is parent & respective drivers of it as child.
Expected Result
Here is my JSON response:
/* Formatting function for row details - modify as you need */
function format(driver_data) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Full name:</td>' +
'<td>' + driver_data.employeename + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extension number:</td>' +
'<td>' + driver_data.email + '</td>' +
'</tr>' +
'</table>';
}
$(document).ready(function () {
var table = $('.trip_unmacthed').DataTable({
type: "GET",
url: "https://api.myjson.com/bins/13woes",
dataType: "json",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{
"data": "employeename"
},
{
"data": "email"
}
],
"order": [[1, 'asc']]
});
// Add event listener for opening and closing details
$('.trip_unmacthed 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');
}
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table class="table table-striped table-bordered table-hover trip_unmacthed">
<thead>
<tr>
<th>User Type</th>
<th> Name</th>
<th>Start Location</th>
<th>Drop Location</th>
<th> Date </th>
<th>Actions</th>
</tr>
</thead>
<tbody id="myData">
</tbody>
</table>

Change the passenger_data to data according to API Docs and your format function.
$(document).ready(function () {
function format(driver_data) {
console.log(driver_data); var b = ''; var i;
for (i = 0; i < driver_data.length; i++) {
b = b + '<tr>' +
'<td></td>' +
'<td>' + driver_data[i].employeename + '</td>' +
'<td>' + driver_data[i].email + '</td>' +
'<td>' + driver_data[i].distance + '</td>' +
'</tr>';
}
return b;
}
var table = $('#example').DataTable({
"ajax": "https://api.myjson.com/bins/y53hs",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{
"data": "employeename"
},
{
"data": "email"
},
{
"data": "mobilenumber"
}
],
"order": [[1, 'asc']]
});
// Add event listener for opening and closing details
$('#example 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
console.log(row.data());
row.child(format(row.data().driver_data)).show();
tr.addClass('shown');
}
});
});

Not sure about what your JSON is . If you have a passenger in your JSON e.g.
{
"passenger_data": [
{
"employeename": "Passenger A",
"email": null,
"driver_data": [
{
"employeename": "Driver A1",
"email": null,
"distance": 0,
},
{
"employeename": "Driver A2",
"email": null,
"distance": 0,
},
],
"mobilenumber": "+12344576",
},
]
}
then you should do it like
"columns": [
{"passenger_data": "employeename"},
{"passenger_data": "driver_data.employeename"},
{"passenger_data": "driver_data.email"}
],
may be your are not using the . operator

TypeError - d is not defined

So I'm using jQuery child rows to display some data within a parent row. After displaying initially via Ajax, I do another ajax request and change data in the datatable. Now, if I try to expand it, it shows the rows. However, if I again try to change data in the datatable, it says d is not defined.
Here is my code when I initially load data in the datatable.
$.ajax({
url: "GetGridDetails?decodeID="+decoderFileSelected,
type: "GET",
dataType: 'json',
success: function (myData) {
if(myData != null){
console.log("my data is:"+myData);
var table = $('#dashNumTable').DataTable({
destroy: true,
data: myData ,
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "S" },
{ "data": "W" },
{ "data": "SA" },
{ "data": "DDS" },
{ "data": "AAS" },
{ "data": "ABS" },
{ "data": "BIN" },
{ "data": "ET" }
],
"order": [[1, 'asc']]
});
// Add event listener for opening and closing details
$('#dashNumTable tbody').on('click', 'td.details-control', function () {
//alert("clicked plus!");
var tr = $(this).closest('tr');
var row = table.row(tr);
//var row = $('#dashNumTable').DataTable().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');
}
});
}//if code ends..
else{
alert("There are no base numbers for the selected decoder ring file...");
}
} //end of success function...
});
This generates table with a plus button to expand and minus button to contract.
Code to refresh and add new data when an ajax event is fired.
$(document).on("click", "#showHGAPartBtn", function(){
// clear the eixisting table contents
//alert("show button clicked!");
var decoderFileSelected = $("#decoderFile").val();
//$('#dashNumTable').empty();
// var clearTable = $('#dashNumTable').DataTable();
// clearTable.clear().draw();
//clearTable.rows().remove();
$('#dashNumTable').DataTable().ajax.reload();
//get the fresh data..
$.ajax({
url: "GetGridDetails?decodeID="+decoderFileSelected,
type: "GET",
dataType: 'json',
success: function (data) {
//if(myData != null){
//console.log("my data is:"+myData);
var table = $('#dashNumTable').DataTable({
// destroy: true,
cache: false,
processing: true,
data: data ,
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "S" },
{ "data": "W" },
{ "data": "SA" },
{ "data": "DDS" },
{ "data": "AAS" },
{ "data": "ABS" },
{ "data": "BIN" },
{ "data": "ET" }
],
"order": [[1, 'asc']]
});
// Add event listener for opening and closing details
// $('#dashNumTable').on('click', 'tbody td.details-control', function () {
$('#dashNumTable').delegate('tbody td.details-control', 'click', function () {
//alert("clicked plus!");
var tr = $(this).closest('tr');
//table.ajax.reload();
var row = table.row(tr);
// alert("Row is :"+row);
//var row = $('#dashNumTable').DataTable().row(tr);
console.log(tr);
console.log(row);
console.log(row.child.isShown());
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');
}
});
// }//if code ends..
// else{
// alert("There are no base numbers for the selected decoder ring file...");
//}
},
//end of success function...
error: function(response){
console.log(response);
}
});// end of AJAX call
Here is the format function, which returns error in second time.
function format (d) {
//alert(d.stringify);
//alert(JSON.stringify(d));
var rowSelectedBaseNumbers = d.HGA_BASE_NUMBERS;
// `d` is the original data object for the row
//alert(rowSelectedBaseNumbers);
var selectedBaseNumbersDropdown = $("#selBaseNumbers").val();
var initial = "<table cellpadding='0' cellspacing='0' class='innerDataTbl'><tr class='shown'> <th>Dash No.</th> <th>Heads</th>";
var finalReturn = "";
var endHeaders = "</tr>";
var middleContentHeaders = "";
//iterate over the base numbers now
for(var i=0;i< selectedBaseNumbersDropdown.length; i++){
middleContentHeaders += "<th>"+selectedBaseNumbersDropdown[i]+"</th>";
}
var beginTRCheckboxes = "<tr><td>"+d.DIGIT+0+","+d.DIGIT+1+"</td><td>Up,Dn</td>";
var endTRCheckboxes = "</tr>";
var endTable = "</table>";
//iterate over the total base numbers again to create respective checkboxes
var checkboxes = "";
for(var i=0;i< selectedBaseNumbersDropdown.length; i++){
//is the selected base number already selected?
if($.inArray(selectedBaseNumbersDropdown[i], rowSelectedBaseNumbers) == -1){
//not found
//display checkbox as it is
checkboxes += "<td><input type='checkbox'/></td>";
}
else{
//found
//mark checkbox already selected
checkboxes += "<td><input type='checkbox' checked='checked' disabled/></td>"
}
}
//generate final return now
finalReturn = initial+middleContentHeaders+endHeaders+beginTRCheckboxes+checkboxes+endTRCheckboxes+endTable;
return finalReturn;
}
The error returned is
typeerror - d is not defined

make a failSafe scenario in your format function for whenever no data is available, the code will not execute.
function format (d) {
if (d) { return null; }
...
}
Are you sure that the code
row.data()
actually returns a value? => Try to figure that out.
Also, what is d? Try to make your code as easy as possible to read. We developers are writers. Not for the computer, but for our colleagues who sometimes need to read our code to understand what we are trying to accomplish.

Function to get row data works only in responsive mode in Datatables

When I click on the image in Reponsive mode, it will return the row data in console. But in normal view I get Undefined error.
var table = $('.dataTable').DataTable({
"responsive": true,
"columnDefs": [{
"targets": 4,
"data": null,
"render": function (data, type, full, meta) {
if (type === 'display') {
data = "<a href='#' width='30px' class='editMe' data='" + full[0] + "'><img src='/images/edit.png' width='30px' /></a>";
}
return data;
}
} ,
{
"targets": 0,
"visible": false,
"searchable": false
}]
});
$('.dataTable').on('click', '.editMe', function () {
console.log(table.row(this).data());
});

Use the code below instead:
$('.dataTable').on('click', '.editMe', function () {
var $row = $(this).closest('tr');
if($row.hasClass('child')){ $row = $row.prev(); }
console.log(table.row($row).data());
});
See this example for code and demonstration.

Rails and DataTable how to pass the JSON Document

Sorry for the bad title. I am new to Rails and Javascript. I setup a DataTable using child rows following the DataTables documentation using a single ajax call to a JSON file.
I got that all working I now want to use my Rails controller to get the JSON from a Mongo DB. I also have that part working. What I am confused about is probably very simple and I am used to building a Rails table with active record BUT here I had a separate javascript called tests.js with my DataTable definition and the ajax call to a file. Can I now just pass in the JSON from the View somehow? I am not sure how to switch from the ajax call to using the JSON I now have from my controller
$(document).ready(function() {
var table = $('#queryone_table').DataTable( {
"ajax": "/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "transactionType" },
{ "data": "collationId" },
{ "data": "licensePlate" },
{ "data": "description" },
{ "data": "startDate" },
{ "data": "FeedComplete" },
{ "data": "RepoComplete" },
{ "data": "feedProcessingDuration" },
{ "data": "completeDuration" }
],
"order": [[1, 'asc']]
} );
Objects.txt I would now like to be a var from my View? With active record and MySQL I would build the table in the view looping over a dataset from controller but with the child row code already done in javascript I would like to leave that.
full javascript code
$(document).ready(function() {
var table = $('#queryone_table').DataTable( {
"ajax": "/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "transactionType" },
{ "data": "collationId" },
{ "data": "licensePlate" },
{ "data": "description" },
{ "data": "startDate" },
{ "data": "FeedComplete" },
{ "data": "RepoComplete" },
{ "data": "feedProcessingDuration" },
{ "data": "completeDuration" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#queryone_table 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');
}
} );
} );
function format ( d ) {
var foo = '<table id="queryinner_table" cellpadding="5" cellspacing="2" border="1" style="padding-left:50px;" class="table table-striped table-bordered table-hover table-condensed dataTable no-footer sub-table">';
// loop over table rows
var trow = "";
for (var i=0; i< d.nextrow.length; i++) {
var foo2 = '<tr>'+
'<td>Transaction Step:</td>'+
'<td>'+d.nextrow[i].transactionStep+'</td>'+
'<td>'+d.nextrow[i].elapsedSeconds+'</td>'+
'</tr>'
trow = trow + foo2
} //for loop
var foo2 = '</table>';
var res = foo.concat(trow);
res = res.concat(foo2);
return res;
}

This was poorly worded I have started a new project and will ask a few questions based on that code rather than rewrite this one.

How to search child row content

I would like this demo to work with the filter, not removing entries whose children have the data that you are filtering for.
E.g. in the example if you filter for 5407 Airi Satou does not get deleted and maybe even the child data gets expanded.
HTML and JS
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<div class="slider">'+
'<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>'+
'</div>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "/examples/ajax/data/objects.txt",
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example 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
$('div.slider', row.child()).slideUp( function () {
row.child.hide();
tr.removeClass('shown');
} );
}
else {
// Open this row
row.child( format(row.data()), 'no-padding' ).show();
tr.addClass('shown');
$('div.slider', row.child()).slideDown();
}
} );
} );
CSS
td.details-control {
background: url('/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('/examples/resources/details_close.png') no-repeat center center;
}
div.slider {
display: none;
}
table.dataTable tbody td.no-padding {
padding: 0;
}

SOLUTION
In order for jQuery DataTables to search child rows you need to add data displayed in the child rows to the main table as hidden columns.
For example, you can add hidden column for extn data property using columns.visible option as shown below:
JavaScript:
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" },
{ "data": "extn", "visible": false }
],
HTML:
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</thead>
DEMO
See this jsFiddle for code and demonstration.