#datatables
#таблицы данных
Вопрос:
У меня есть страница с данными jQuery, полученными из Ajax, и нарисованная с помощью плагина npm TreeGrid. Таблица отрисовывается нормально, но я пытаюсь уловить конец загрузки таблицы, чтобы кое-что сделать (получить дополнительные данные, которые будут готовы, когда дерево будет развернуто). Событие init.dt или параметр InitComplete запускаются до того, как таблица будет отрисована. Если я помещаю оповещение в событие, оно отображается после рисования верхней и нижней части таблицы, но до отображения данных. И если я попытаюсь получить доступ к данным таблицы, это не определено.
Важно: я получаю такое же поведение, если удаляю объект TreeGrid из параметров DataTable. Я даже удалил JavaScript TreeGrid…
Итак, мой вопрос: как я могу запустить код, когда все действительно готово?
Ниже приведены две реализации Datatble, либо с init.dt, либо с InitComplete. Я также добавляю объект columns. Ниже приведены два скриншота предупреждения, а затем нарисована таблица.
$(document).ready(function () {
$('#mainTable')
.on('init.dt', function () {
alert('Table initialisation complete')
})
.DataTable({
"ajax": '/API/RRate',
'treeGrid': {
'left': 20,
'expandIcon': '<span> </span>',
'collapseIcon': '<span>-</span>'
},
"columns": columns
});
});
$(document).ready(function () {
$('#mainTable')
.DataTable({
"ajax": '/API/RRate',
'treeGrid': {
'left': 20,
'expandIcon': '<span> </span>',
'collapseIcon': '<span>-</span>'
},
"columns": columns,
"initComplete": function (settings, json) {
alert('Table initialisation complete')
}
});
});
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: 'HeadCount',
target: 2,
data: function (item) {
return item.headCount;
}
},
{
title: 'Responded',
target: 3,
data: function (item) {
return item.responded;
}
},
{
title: 'Percentage',
target: 4,
data: function (item) {
return item.percentage;
}
},
{
title: 'InProcess',
target: 5,
data: function (item) {
return item.inProcess;
}
},
];
Комментарии:
1. Проблема с событием инициализации заключается только в том, что вы не можете получить доступ к ‘tabledata’? также под tabledata вы подразумеваете объект datatables или что-то еще?
Ответ №1:
Хорошо, я нашел, как это сделать:
function AfterLoad()
{
table.rows().each(function () {
console.log(this.cells(0));
var rowData = this.data();
console.log(rowData[0]);
});
}
$(document).ready(function () {
table = $('#mainTable')
.DataTable({
"ajax": '/API/RRate',
'treeGrid': {
'left': 20,
'expandIcon': '<span> </span>',
'collapseIcon': '<span>-</span>'
},
"columns": columns,
"initComplete": function (settings, json) {
AfterLoad();
}
});
});