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

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

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

这是一个小提琴：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/