隐藏列后，jQuery Datatable无法响应到底部

Question

我正在使用具有以下简单结构的数据表：

<table id="tableListUsers" class="table table-hover dt-responsive compact" style="width:95%">
  <thead>
    <tr>
      <th>uid</th>
      <th><%= pageInfo.firstName %></th>
      <th><%= pageInfo.lastName %></th>
      <th><%= pageInfo.username %></th>
      <th><%= pageInfo.phone %></th>
      <th><%= pageInfo.address %></th>
      <th><%= pageInfo.jobDescription %></th>
      <th><%= pageInfo.active %></th>
    </tr>
  </thead>
  <tbody>
    <% users.forEach(function(user) { %>
    <tr>
      <td class="uidTable"> <%= user.uid %> </td>
      <td class="uidTable"><%= user.name %></td>
      <td class="uidTable"><%= user.lastName %></td>
      <td class="uidTable"><%= user.email %></td>
      <td class="uidTable"><%= user.phone %></td>
      <td class="uidTable"><%= user.address %></td>
      <td class="uidTable"><%= user.jobDescription %></td>
      <td class="uidTable"><%= user.active %></td>
    </tr>
    <% }) %>
  </tbody>
</table>

我已经隐藏了第一列，因为我只需要uid来编辑显示的用户，但不必将其显示给用户。因此，我将此配置添加到了数据表中，并且按预期隐藏了第一列。但是，如果我将窗口调整为移动大小，则实际上是在响应，但不会将缺少的列重新排列到行的底部。

我希望您能对下一张图片有更好的了解：

首先，这是我表中显示的所有信息：

但是当我调整大小以移动表格时，表格并不会显示所有列：

预期输出是这样：

您可以看到列丢失了，并且无法在第二张图中看到它们，这是我的数据表的配置：

table = $('#tableListUsers').DataTable( {
  rowReorder: {
      selector: 'td:nth-child(0)'
  },
  responsive: true,
  "paging":   true,
  "ordering": true,
  "info":     true,
  "language": {
    "lengthMenu": "Displaying _MENU_ records per page",
    "zeroRecords": "Nothing found - sorry",
    "info": "Showing page _PAGE_ of _PAGES_",
    "infoEmpty": "No records available",
    "infoFiltered": "(filtered from _MAX_ total records)"
  },
  // If I delete columnDefs it works as expected but I need it to hide the column 0 that I mentioned the user won't see.
  columnDefs: [
    { targets: [ 0 ],
    className: "hide_column"
    }
  ]
});

Answer 1

好像您正在使用CSS类隐藏该列...

您应该使用DataTable's visible option。

$('#example').dataTable( {
  "columnDefs": [
    { "visible": false, "targets": 0 }
  ]
});