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

Question

我想要一个数据表显示具有第一优先级的第二列、具有第二优先级的第五列和具有第三优先级的第一列。为了实现这一点，我集成了这个 CSS 链接:

<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/