Jquery Datatable下拉框式列选择功能实现问询

刚好我之前做过类似的需求，给你分享两种可行的方案：一种是基于官方示例改造成下拉框的自定义实现，另一种是用现成插件快速搞定。

如果想要完全自主控制样式和交互逻辑，可以自己动手实现，步骤很清晰：

步骤1：添加HTML结构 #

先在页面上放一个多选下拉框和触发按钮（也可以去掉按钮，实时响应选择）：

<div class="column-selector-container">
  <label>选择要显示的列：</label>
  <select id="columnSelector" multiple size="6" style="min-width: 200px;">
    <!-- 选项会通过JS动态生成 -->
  </select>
  <button id="applyColumnSelection" style="margin-left: 10px;">应用选择</button>
</div>

步骤2：动态生成列选项并绑定事件 #

初始化DataTable之后，我们可以遍历所有列，把列标题作为下拉选项，再绑定选择事件来控制列的显示/隐藏：

// 初始化你的DataTable实例
const myTable = $('#your-table-id').DataTable({
  // 你的表格配置项，比如数据源、列定义等
});

// 动态填充下拉选项：把每一列的标题和索引对应起来
myTable.columns().every(function() {
  const column = this;
  const option = $('<option>')
    .val(column.index())
    .text(column.header().textContent);
  
  // 默认选中所有列
  option.prop('selected', true);
  $('#columnSelector').append(option);
});

// 绑定"应用选择"按钮的点击事件
$('#applyColumnSelection').on('click', function() {
  const selectedColumnIndexes = $('#columnSelector').val();
  
  // 先隐藏所有列
  myTable.columns().visible(false);
  
  // 显示用户选中的列
  if (selectedColumnIndexes) {
    myTable.columns(selectedColumnIndexes).visible(true);
  }
});

优化：带复选框的友好下拉菜单 #

原生多选下拉的交互体验不太友好，你可以改成带复选框的下拉菜单（比如结合Bootstrap的Dropdown组件）：

<div class="dropdown">
  <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    选择显示列
  </button>
  <ul class="dropdown-menu p-2" style="max-height: 300px; overflow-y: auto;">
    <!-- 动态生成带复选框的菜单项 -->
  </ul>
</div>

// 生成带复选框的菜单项
myTable.columns().every(function() {
  const column = this;
  const menuItem = $('<li>').append(
    $('<label>').addClass('d-flex align-items-center gap-2 py-1').append(
      $('<input type="checkbox">')
        .prop('checked', true)
        .data('col-index', column.index()),
      column.header().textContent
    )
  );
  $('.dropdown-menu').append(menuItem);
});

// 绑定复选框的change事件，实时切换列显示
$('.dropdown-menu input').on('change', function() {
  const colIndex = $(this).data('col-index');
  myTable.column(colIndex).visible($(this).is(':checked'));
});

如果不想自己写太多代码，直接用成熟插件更省心：

官方Buttons扩展（ColVis功能） #

DataTables官方的Buttons扩展自带列显示/隐藏的下拉菜单功能，这是最稳妥的选择（官方维护，兼容性拉满）：
首先确保你引入了Buttons的JS和CSS文件，然后初始化时配置：

$('#your-table-id').DataTable({
  dom: 'Bfrtip', // 把按钮放在表格上方
  buttons: [
    {
      extend: 'colvis',
      text: '选择显示列', // 自定义按钮文本
      collectionLayout: 'fixed two-column', // 下拉菜单的布局
      // 可以自定义每一列在菜单里的显示文本
      columnText: function(dt, idx, title) {
        return title;
      }
    }
  ]
});

这个扩展的下拉菜单自带复选框，用户勾选后实时生效，还支持记忆用户的选择，非常方便。

第三方插件参考（可选） #

如果想要更多自定义样式，也可以看看第三方插件比如datatables-column-selector，不过需要注意和你当前DataTables版本的兼容性，个人还是更推荐官方扩展，省心又靠谱。

内容的提问来源于stack exchange，提问作者Ankit Bansal