#javascript #jquery #datatables #treegrid
#javascript #jquery #таблицы данных #treegrid
Вопрос:
Я создал таблицы данных, используя Datatable 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": "$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/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> Таблица данных создается, но когда я снова вызываю эту функцию, передавая новые «данные» (например, когда я нажимаю кнопку более одного раза), расширители ( и -) перестают работать.
Я понимаю это:
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
}
Поэтому я больше не могу расширять содержимое.
Что я могу сделать?
Ответ №1:
Обратите внимание, что DataTable поместит ваш контейнер #example внутри другого div #example_wrapper, поэтому при повторном нажатии появляется не только ваш чистый элемент.
Чтобы решить эту проблему, создайте элемент #example динамически внутри контейнера div.
<div id="div_container" ></div>
… затем вызовите это перед методом для построения таблицы.
$('#div_container').html('<table id="example"></table>');
Комментарии:
1. Итак, не будет ли у меня таблицы в моем html-коде? Я проверю это. 🙂