javascript - DataTables响应式:隐藏列时删除行

我正在使用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。您可以清楚地看到在显示列时它起作用，而在隐藏列时它就中断了。

我想知道是否还有其他人遇到类似问题，我们将不胜感激。

最佳答案

我设法解决了这个问题。我决定将其发布，以防其他人遇到类似问题。

这行不通，因为列折叠时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。