I created a Datatables using the Datatable treeGrid: https://github.com/homfen/dataTables.treeGrid.js
my code:
$('#exampleButton').on("click", function(){
let Data = d();
dt(Data);
});
function dt(data){
var columns = [
{
title: '',
target: 0,
className: 'treegrid-control',
data: function (item) {
if (item.children) {
return '<span>+</span>';
}
return '';
}
},
{
title: 'Name',
target: 1,
data: function (item) {
return item.name;
}
},
{
title: 'Position',
target: 2,
data: function (item) {
return item.position;
}
},
{
title: 'Office',
target: 3,
data: function (item) {
return item.office;
}
},
{
title: 'Extn.',
target: 4,
data: function (item) {
return item.extn;
}
},
{
title: 'Start date',
target: 5,
data: function (item) {
return item.start;
}
},
{
title: 'Salary',
target: 6,
data: function (item) {
return item.salary;
}
}
];
$('#example').DataTable({
'destroy': true,
'columns': columns,
'data': data,
'treeGrid': {
'left': 10,
'expandIcon': '<span>+</span>',
'collapseIcon': '<span>-</span>'
}
});
}
function d(){
return [
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start": "2011\/04\/25",
"salary": "$320,800",
"children": [
{
"name": "Hermione Butler",
"position": "Regional Director",
"office": "London",
"extn": "1016",
"start": "2011\/03\/21",
"salary": "$356,250"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "$103,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "$103,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "$103,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
}
]
},
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start": "2011\/04\/25",
"salary": "$320,800",
"children": [
{
"name": "Hermione Butler",
"position": "Regional Director",
"office": "London",
"extn": "1016",
"start": "2011\/03\/21",
"salary": "$356,250"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "$103,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "$103,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "$103,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
}
]
},
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start": "2011\/04\/25",
"salary": "$320,800",
"children": [
{
"name": "Hermione Butler",
"position": "Regional Director",
"office": "London",
"extn": "1016",
"start": "2011\/03\/21",
"salary": "$356,250"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "$103,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "$103,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "$103,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
}
]
},
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start": "2011\/04\/25",
"salary": "$320,800",
"children": [
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "$103,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "$103,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": "$86,500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "$183,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "$183,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "$112,000"
}
]
}
]
}
]
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--datatable-->
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"></style>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<!--datatable-treegrid-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dataTables.treeGrid.js" integrity="sha256-klXMhqbeoG/fvl7/eBOnTx62ZDuc/QLbMqSoAP49tcY=" crossorigin="anonymous"></script>
<table id="example"></table>
<button type="button" id="exampleButton">Clique me!</button>The DataTable is created, but when I call this function again by passing a new 'data' (like when I click the button more than once), the expandIcons (+ and -) stop working. I get this:
error {
"message": "Uncaught TypeError: Cannot read property 'children' of undefined",
"filename": "https://cdn.jsdelivr.net/npm/[email protected]/dataTables.treeGrid.js",
"lineno": 134,
"colno": 26
}
So I can't expand the content anymore. What can I do?
Note that DataTable will put your container #example inside of another div #example_wrapper, so when you click again there is not just your clean element.
To solve this, create the #example element dynamically inside of a div container.
<div id="div_container" ></div>
...then call this before the method to build the table.
$('#div_container').html('<table id="example"></table>');