Дочерние строки таблицы данных работают один раз за 2 обновления

1

Поэтому я использую 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
Теги:

1 ответ

0

Таким образом, проблема заключалась в том, что каждый раз, когда я обновляю данные и код, выполняется еще один, создается еще один прослушиватель событий. Код просто открывает и закрывает дочернюю строку, когда есть четное количество слушателей, вы просто не видите ее глазами :) Чтобы исправить эту проблему, я добавил " .off(" click ") в свой код, и теперь все работает так, как должно.

  window.$('#table_id tbody').off('click').on('click', 'td.details-control', function () {

Ещё вопросы

Сообщество Overcoder
Наверх
Меню