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结构会发生变化。为了解决这个问题，我添加了额外的检查，以验证列是否已折叠。

修改后的代码：

{{1}}

现在工作正常。

此处已更新jsfiddle。

DataTables响应：隐藏列时删除行

1 个答案: