如何在移动设备上隐藏数据表的特定列

Question

我想要一个数据表以第一优先级显示第二列，第二优先级显示第五列，第三优先级显示第一列。为此，我整合了这个 CSS link:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">

并在 HTML 部分添加：

<th data-priority="1">

但是数据表没有隐藏任何列，甚至没有像我期望的默认设置那样隐藏右侧的列。

这是一个fiddle：https://jsfiddle.net/Joh_Christ/h7Lg6cqt/4/

Answer 1

您还没有添加响应式列隐藏所需的脚本。添加，https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js 和 DataTable 将在屏幕尺寸较小时自动隐藏列。

同时添加响应式插件脚本https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js

如果你想隐藏特定的列，那么你需要在列上添加display class。查看 https://datatables.net/extensions/responsive/examples/display-control/classes.html 了解更多详情。对于您的情况，添加以下代码将隐藏 2 列。

    <tr>
      <th></th>
      <th></th>
      <th class="min-phone-l"></th>
      <th class="min-phone-l"></th>
      <th data-priority="1"></th>
    </tr>

对于列重新排序，请在此处检查 colReorder ：https://datatables.net/extensions/colreorder/

如何在移动设备上隐藏数据表的特定列

How to hide specific columns of a datatable on mobile devices

datatable

responsive