Datatables实现点击列显示、其余列隐藏功能的代码修改问询

我使用Datatables库处理表格，现有一段用于切换单列显示/隐藏的代码：

$(document).ready(function () {
    $('a.toggle-vis').on('click', function (e) {
        e.preventDefault();
        var column = $('#workColMainTable').DataTable().columns($(this).attr('data-column'));
        column.visible(!column.visible());
    });
});

现在需要修改功能：点击对应列的按钮时，仅显示该列，隐藏其他所有列；点击「All」按钮时显示全部列。我的HTML结构如下：

<div class="nav">
      <a class="toggle-vis" data-column="1">All</a>
      <a class="toggle-vis" data-column="2">Verified</a>
      <a class="toggle-vis" data-column="3">Completed</a>
      <a class="toggle-vis" data-column="4">Resulted</a>
      <a class="toggle-vis" data-column="5">Confirmed</a>
</div>
<table id="workColMainTable">
  <thead>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
    <th>Four</th>
    <th>Five</th>
  </thead>
  <tbody>
    <tr>
      <td>Urgent</td>
      <td>Resource</td>
      <td>0123456781</td>
      <td>Clear</td>
      <td>Box</td>
    </tr>
  </tbody>
</table>

关键修正点 #

Datatables的列索引从0开始，你原HTML中data-column的值（1-5）与表格实际列索引（0-4）不匹配，这会导致代码无法正确定位列，必须先修正这个问题。

调整后的HTML #

修改data-column值匹配列索引，并给「All」按钮单独标记：

<div class="nav">
      <a class="toggle-vis" data-column="all">All</a>
      <a class="toggle-vis" data-column="0">Verified</a> <!-- 对应表头One -->
      <a class="toggle-vis" data-column="1">Completed</a> <!-- 对应表头Two -->
      <a class="toggle-vis" data-column="2">Resulted</a> <!-- 对应表头Three -->
      <a class="toggle-vis" data-column="3">Confirmed</a> <!-- 对应表头Four -->
      <a class="toggle-vis" data-column="4">Other</a> <!-- 对应表头Five -->
</div>
<table id="workColMainTable">
  <thead>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
    <th>Four</th>
    <th>Five</th>
  </thead>
  <tbody>
    <tr>
      <td>Urgent</td>
      <td>Resource</td>
      <td>0123456781</td>
      <td>Clear</td>
      <td>Box</td>
    </tr>
  </tbody>
</table>

重写后的JavaScript代码 #

$(document).ready(function () {
    // 缓存Datatables实例，避免重复初始化
    const table = $('#workColMainTable').DataTable();

    $('a.toggle-vis').on('click', function (e) {
        e.preventDefault();
        const targetCol = $(this).attr('data-column');

        if (targetCol === 'all') {
            // 显示所有列
            table.columns().visible(true);
        } else {
            // 先隐藏所有列，再单独显示目标列
            table.columns().visible(false);
            table.columns(targetCol).visible(true);
        }
    });
});

逻辑说明 #

1. 缓存Datatables实例，减少重复DOM查询和初始化操作，提升性能。
2. 给「All」按钮的data-column设为all，方便快速分支处理逻辑。
3. 普通列按钮点击时，先通过table.columns().visible(false)隐藏所有列，再单独启用目标列的可见性。
4. 「All」按钮点击时，直接将所有列设为可见。

内容的提问来源于stack exchange，提问作者Yousef Salama