Поэтому я использую Electron.js, плагин datables.net и дочерние строки.
Когда я обновляю данные в таблице, дочерние строки перестают работать, пока я не обновляю данные еще раз, и так далее. Таким образом, дочерние строки работают только один раз за два обновления данных. Я попытался сделать цикл, где код выполняется два раза, но без успеха. Я получил данные из базы данных Postgres.
var table = window.$('#table_id').DataTable({
data: data,
select: "single",
retrieve: true,
columns: [{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
"render": function() {
return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
},
width: "15px"
},
{"data": "fn"},
{"data": "username"},
{"data": "timestamp"},
{"data": "filename"},
{"data": "agent"},
{"data": "job_type"},
{"data": "progress"},
{"data": "status"},
{"data": "priority"},
],
"order": [
[1, 'asc']
]
});
myConsole.log("1")
window.$('#table_id tbody').on('click', 'td.details-control', function() {
var tr = window.$(this).closest('tr');
var tdi = tr.find("i.fa");
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
tdi.first().removeClass('fa-minus-square');
tdi.first().addClass('fa-plus-square');
} else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
tdi.first().removeClass('fa-plus-square');
tdi.first().addClass('fa-minus-square');
}
});
window.$('#table_id').on("user-select", function(e, dt, type, cell, originalEvent) {
if (window.$(cell.node()).hasClass("details-control")) {
e.preventDefault();
}
});
function format(d) {
// 'd' is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Path:</td>' +
'<td>' + d.path + '</td>' +
'</tr>' +
'<tr>' +
'<td>Message::</td>' +
'<td>' + d.message + '</td>' +
'</tr>' +
'</table>';
}
window.$('#table_id').DataTable().clear().draw();
window.$('#table_id').DataTable().rows.add(data); // Add new data
window.$('#table_id').DataTable().columns.adjust().draw(); // Redraw the DataTable
Таким образом, проблема заключалась в том, что каждый раз, когда я обновляю данные и код, выполняется еще один, создается еще один прослушиватель событий. Код просто открывает и закрывает дочернюю строку, когда есть четное количество слушателей, вы просто не видите ее глазами :) Чтобы исправить эту проблему, я добавил " .off(" click ") в свой код, и теперь все работает так, как должно.
window.$('#table_id tbody').off('click').on('click', 'td.details-control', function () {