javascript - 数据表响应 : Remove row when columns are hidden

Question

我正在使用DataTables创建网格。

这是一个很棒的工具，但是当网格列被隐藏时，例如在移动设备或其他小型设备上没有足够的空间来显示所有列时，就会出现问题。

问题:

隐藏列时删除网格行。当列显示时它工作得很好。

表格代码:

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Remove</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Remove</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>
        <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
      </td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>
        <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
      </td>
    </tr>

  </tbody>
</table>

Javascript代码:

$(document).ready(function() {
  $('#example').DataTable({
    responsive: true
  });
});

$(".removeRow").click(function() {
  var table = $('#example').DataTable();
  table.row($(this).parents('tr')).remove().draw();
});

我附上 jsfiddle 的链接。您可以清楚地看到它在显示列时有效，而在隐藏列时则中断。

我想知道是否有其他人遇到过类似的问题，任何帮助将不胜感激。

Answer 1

我已经成功解决了这个问题。我决定将其发布，以防其他人遇到类似问题。

这不起作用，因为当列折叠时 HTML 结构会发生变化。为了解决这个问题，我添加了额外的检查，以验证列是否折叠。

修改后的代码:

$(document).on("click", ".removeRow", function() {
    var table = $('#example').DataTable();  
  var row;

  console.log($(this).closest('table'));
  if($(this).closest('table').hasClass("collapsed")) {
    var child = $(this).parents("tr.child");
    row = $(child).prevAll(".parent");
  } else {
    row = $(this).parents('tr');
  }

  table.row(row).remove().draw();

});

现在工作正常。

此处已更新 jsfiddle .