What I get from Server is a list of parent objects, each one consisting of zero or more child objects. Kind of like the following
var data = [{
"Id" : 1,
"permissionValue" : 7,
"child" : { //only one child object for simplicity
"Id" :2,
"permissionValue" : 7
}
}];
I want to load this data to a jQuery datatable. Implement a rowCallback function (to add some CSS class) like this:
tableOptions.rowCallBack = function(row,data,index){
var api = this.api();
api.rows.add(data.child).draw(); //not sure whether draw is necessary
};
tableOptions.data = data;
that.dataTable = $("#dataTable").DataTable(tableOptions);
Unsurprisingly, only the parent object(s) loads. I understand that this is not how the data should be passed. Still, it's good to know whether this kind of hierarchical data can be displayed with effort.
What I get from Server is a list of parent objects, each one consisting of zero or more child objects. Kind of like the following
var data = [{
"Id" : 1,
"permissionValue" : 7,
"child" : { //only one child object for simplicity
"Id" :2,
"permissionValue" : 7
}
}];
I want to load this data to a jQuery datatable. Implement a rowCallback function (to add some CSS class) like this:
tableOptions.rowCallBack = function(row,data,index){
var api = this.api();
api.rows.add(data.child).draw(); //not sure whether draw is necessary
};
tableOptions.data = data;
that.dataTable = $("#dataTable").DataTable(tableOptions);
Unsurprisingly, only the parent object(s) loads. I understand that this is not how the data should be passed. Still, it's good to know whether this kind of hierarchical data can be displayed with effort.
Share Improve this question edited May 28, 2015 at 20:36 Gyrocode. 59k16 gold badges156 silver badges192 bronze badges asked May 28, 2015 at 11:49 Abdul Wadhood RehmanAbdul Wadhood Rehman 1191 gold badge2 silver badges11 bronze badges1 Answer
Reset to default 5See the snippet below for demonstration of a potential solution. You would need to adapt it to match your data structure since you have somewhat simplified it in your question.
This code makes use of the row().child methods to firstly check if a row is already displayed, and if so hide it, otherwise show it.
$(document).ready(function() {
var dataInJson = [{
"data": {
"name": "b1",
"street": "s1",
"city": "c1",
"departments": 10,
"offices": 15
},
"kids": [{
"data": {
"department": "HR",
"supervisor": "Isidor Bristol",
"floor": 1,
"employees": 15
},
"kids": [{
"data": {
"name": "Klement Nikodemos",
"phone": "+938462",
"hire_date": "January 1, 2010",
"id": 3456
},
"kids": []
}, {
"data": {
"name": "Madhava Helmuth",
"phone": "+348902",
"hire_date": "May 23, 2002",
"id": 1234
},
"kids": []
}, {
"data": {
"name": "Andria Jesse",
"phone": "456123",
"hire_date": "October 23, 2011",
"id": 9821
},
"kids": []
}
]
}, {
"data": {
"department": "development",
"supervisor": "Jim Linwood",
"floor": 2,
"employees": 18
},
"kids": [{
"data": {
"name": "Origenes Maxwell",
"phone": "345892",
"hire_date": "February 1, 2004",
"id": 6234
},
"kids": []
}
]
}, {
"data": {
"department": "testing",
"supervisor": "Zekeriya Seok",
"floor": 4,
"employees": 11
},
"kids": []
}]
}, {
"data": {
"name": "b2",
"street": "s10",
"city": "c2",
"departments": 3,
"offices": 10
},
"kids": [{
"data": {
"department": "development",
"supervisor": "Gallagher Howie",
"floor": 8,
"employees": 24
},
"kids": [{
"data": {
"name": "Wat Dakota"
},
"kids": []
}
]
}, {
"data": {
"department": "testing",
"supervisor": "Shirley Gayle",
"floor": 4,
"employees": 11
},
"kids": []
}]
}, {
"data": {
"name": "b3",
"street": "s3",
"city": "c3",
"departments": 2,
"offices": 1
},
"kids": [{
"data": {
"department": "development"
},
"kids": [{
"data": {
"name": "Wat Dakota"
},
"kids": []
}
]
}, {
}]
},
{
"data": {
"name": "b4",
"city": "c4"
},
"kids": []
}
];
function buildTable(idOfTableParentElement, tableDataInJson) {
var deepCopyOfData = JSON.parse(JSON.stringify(tableDataInJson));
var countRowOccurence = (idOfTableParentElement.match(/row/g) || []).length;
var table_id = 0;
var tableIdString = "";
if (countRowOccurence > 0) {
var rowIds = new Array();
var copyIdOfTableParentElement = idOfTableParentElement
for (var i = countRowOccurence; i > 0; i--) {
var firstIndexOfTabPosition = copyIdOfTableParentElement.indexOf("tab_") + "tab_".length;
copyIdOfTableParentElement = copyIdOfTableParentElement.substring(firstIndexOfTabPosition, copyIdOfTableParentElement.length);
var rowPosition = copyIdOfTableParentElement.indexOf("row_") + "row_".length;
copyIdOfTableParentElement = copyIdOfTableParentElement.substring(rowPosition, copyIdOfTableParentElement.length);
var rowId = "";
if (copyIdOfTableParentElement.indexOf("tab_") != -1)
rowId = copyIdOfTableParentElement.substring(0, copyIdOfTableParentElement.indexOf("tab_"));
else
rowId = copyIdOfTableParentElement.substring(0, copyIdOfTableParentElement.length);
rowIds.push(parseInt(rowId));
}
rowIds.forEach(function(hierarchyPosition) {
deepCopyOfData = JSON.parse(JSON.stringify(deepCopyOfData[hierarchyPosition].kids));
});
table_id = idOfTableParentElement;
tableIdString = idOfTableParentElement + "_tab_" + countRowOccurence.toString();
} else {
tableIdString = "tab_" + countRowOccurence.toString();
}
var tableInHtml = "<table id=\"" + tableIdString + "\" class=\"stripe row-border order-column\">";
tableInHtml += buildTableContent(tableIdString, deepCopyOfData);
tableInHtml += "</table>";
var a = $('#exampleTable tbody tr');
return tableInHtml;
}
function buildTableContent(tableIdString, tableDataInJson) {
// find data with max number of proerties
var positionOfDataWithMaxProperties = 0;
var maxNumberOfProperties = 0;
for (var i = 0; i < tableDataInJson.length; i++) {
if (typeof(tableDataInJson[i].data) !== 'undefined') {
if (Object.keys(tableDataInJson[i].data).length > maxNumberOfProperties) {
maxNumberOfProperties = Object.keys(tableDataInJson[i].data).length;
positionOfDataWithMaxProperties = i;
}
}
}
// create array of properties
var properties = new Array();
Object.keys(tableDataInJson[positionOfDataWithMaxProperties].data).forEach(function(key) {
properties.push(key);
});
// create header of table
var TableMainHeader = "<thead><tr>";
for (var i = 0; i < tableDataInJson.length; i++) {
if (typeof(tableDataInJson[i].kids) !== 'undefined' && tableDataInJson[i].kids.length > 0) {
TableMainHeader += "<th></th>";
break;
}
}
properties.forEach(function(property) {
TableMainHeader += "<th>" + property + "</th>";
});
TableMainHeader += "</tr></thead>";
// create body of table
var TableMainBody = "<tbody>";
for (var i = 0; i < tableDataInJson.length; i++) {
if (typeof(tableDataInJson[i].data) !== 'undefined') {
TableMainBody += "<tr id=\"" + tableIdString + "_row_" + parseInt(i) + "\" >";
if (TableMainHeader.indexOf("<th></th>") != -1) {
if (tableDataInJson[i].kids.length > 0)
TableMainBody += "<td><img src=\"http://blog.picol/wp-content/themes/icon_blog/images/css_images/arrow_right_16.png\"></td>";
else
TableMainBody += "<td></td>";
}
properties.forEach(function(property) {
if (Object.keys(tableDataInJson[i].data).indexOf(property) === -1)
TableMainBody += "<td></td>";
else
TableMainBody += "<td>" + tableDataInJson[i].data[property] + "</td>";
});
TableMainBody += "</tr>";
}
};
TableMainBody += "</tbody>";
return TableMainHeader + TableMainBody;
}
//Run On HTML Build
$(document).ready(function() {
var divElement = $("#example").append(buildTable("example", dataInJson));
var tables = new Array();
//Initialse DataTables, with no sorting on the 'details' column
var table = divElement.children().first().DataTable({
"paginate": false,
"lengthChange": false,
"searching": false,
"ordering": false,
"info": false,
"autoWidth": false
});
tables.push([divElement.children().first().children().first().attr("id"), table]);
$(document).on('click', '#example tbody tr', function() {
var $row = $(this);
var parentTable = new Object();
var parentTableId = $row.parent().parent().attr("id");
for (var i = 0; i < tables.length; i++) {
if (tables[i][0] === $row.parent().parent().attr("id")) {
parentTable = tables[i][1];
break;
}
}
if (parentTable.row(this).child.isShown()) {
/* This row is already open - close it */
parentTable.row(this).child.hide();
} else {
if ($(this).children().first().children().first().is("img")) {
/* Open this row */
var tableInString = buildTable($row.attr("id"), dataInJson);
var tableAsJQueryNode = $('<div/>').html(tableInString).contents();
parentTable.row(this).child(tableAsJQueryNode, 'details').show();
var newtable = $('#' + tableAsJQueryNode.attr("id")).DataTable({
"paginate": false,
"lengthChange": false,
"searching": false,
"ordering": false,
"info": false,
"autoWidth": false
});
if (tables.some(function(a) {
return a[0] !== tableAsJQueryNode.attr("id")
})) {
tables.push([tableAsJQueryNode.attr("id"), newtable]);
}
}
}
});
});
});<link href="http://cdn.datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.datatables/1.10.7/js/jquery.dataTables.min.js"></script>
<div id="example"></div>