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/

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

1 个答案: