更新数据后 DataTables 的问题
Problem with DataTables after updating data
我使用数据表 treeGrid 创建了一个数据表：
https://github.com/homfen/dataTables.treeGrid.js
我的代码：
$('#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": "0,800",
"children": [
{
"name": "Hermione Butler",
"position": "Regional Director",
"office": "London",
"extn": "1016",
"start": "2011\/03\/21",
"salary": "6,250"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
}
]
},
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start": "2011\/04\/25",
"salary": "0,800",
"children": [
{
"name": "Hermione Butler",
"position": "Regional Director",
"office": "London",
"extn": "1016",
"start": "2011\/03\/21",
"salary": "6,250"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
}
]
},
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start": "2011\/04\/25",
"salary": "0,800",
"children": [
{
"name": "Hermione Butler",
"position": "Regional Director",
"office": "London",
"extn": "1016",
"start": "2011\/03\/21",
"salary": "6,250"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
}
]
},
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start": "2011\/04\/25",
"salary": "0,800",
"children": [
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,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/datatables-treegrid@1.0.4/dataTables.treeGrid.js" integrity="sha256-klXMhqbeoG/fvl7/eBOnTx62ZDuc/QLbMqSoAP49tcY=" crossorigin="anonymous"></script>
<table id="example"></table>
<button type="button" id="exampleButton">Clique me!</button>
DataTable 已创建，但当我通过传递新的 'data' 再次调用此函数时（就像我多次单击按钮时），expandIcons（+ 和 -）停止工作。
我明白了：
error {
"message": "Uncaught TypeError: Cannot read property 'children' of undefined",
"filename": "https://cdn.jsdelivr.net/npm/datatables-treegrid@1.0.4/dataTables.treeGrid.js",
"lineno": 134,
"colno": 26
}
所以不能再展开内容了。
我能做什么？
请注意，DataTable 会将您的容器 #example 放入另一个 div#example_wrapper 中，因此当您再次单击时，不只是您的干净元素。
要解决此问题，请在 div 容器内动态创建 #example 元素。
<div id="div_container" ></div>
...然后在构建 table.
的方法之前调用它
$('#div_container').html('<table id="example"></table>');
我使用数据表 treeGrid 创建了一个数据表： https://github.com/homfen/dataTables.treeGrid.js
我的代码：
$('#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": "0,800",
"children": [
{
"name": "Hermione Butler",
"position": "Regional Director",
"office": "London",
"extn": "1016",
"start": "2011\/03\/21",
"salary": "6,250"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
}
]
},
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start": "2011\/04\/25",
"salary": "0,800",
"children": [
{
"name": "Hermione Butler",
"position": "Regional Director",
"office": "London",
"extn": "1016",
"start": "2011\/03\/21",
"salary": "6,250"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
}
]
},
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start": "2011\/04\/25",
"salary": "0,800",
"children": [
{
"name": "Hermione Butler",
"position": "Regional Director",
"office": "London",
"extn": "1016",
"start": "2011\/03\/21",
"salary": "6,250"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
}
]
},
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start": "2011\/04\/25",
"salary": "0,800",
"children": [
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,000"
}
]
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"office": "London",
"extn": "6733",
"start": "2009\/02\/27",
"salary": "3,500",
"children": [
{
"name": "Jonas Alexander",
"position": "Developer",
"office": "San Francisco",
"extn": "8196",
"start": "2010\/07\/14",
"salary": ",500"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"office": "Edinburgh",
"extn": "6373",
"start": "2008\/11\/13",
"salary": "3,000"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"office": "Singapore",
"extn": "5384",
"start": "2011\/06\/27",
"salary": "3,000"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"office": "New York",
"extn": "4226",
"start": "2011\/01\/25",
"salary": "2,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/datatables-treegrid@1.0.4/dataTables.treeGrid.js" integrity="sha256-klXMhqbeoG/fvl7/eBOnTx62ZDuc/QLbMqSoAP49tcY=" crossorigin="anonymous"></script>
<table id="example"></table>
<button type="button" id="exampleButton">Clique me!</button>
DataTable 已创建，但当我通过传递新的 'data' 再次调用此函数时（就像我多次单击按钮时），expandIcons（+ 和 -）停止工作。 我明白了：
error {
"message": "Uncaught TypeError: Cannot read property 'children' of undefined",
"filename": "https://cdn.jsdelivr.net/npm/datatables-treegrid@1.0.4/dataTables.treeGrid.js",
"lineno": 134,
"colno": 26
}
所以不能再展开内容了。 我能做什么？
请注意，DataTable 会将您的容器 #example 放入另一个 div#example_wrapper 中，因此当您再次单击时，不只是您的干净元素。
要解决此问题，请在 div 容器内动态创建 #example 元素。
<div id="div_container" ></div>
...然后在构建 table.
的方法之前调用它$('#div_container').html('<table id="example"></table>');