如何按字母顺序重新排序Datatables列可见性按钮的选项？

当然可以实现，核心是通过自定义列可见性按钮的columns配置项，对列标题进行字母排序后再返回给按钮。具体实现步骤如下：

• 在初始化DataTables时，给colvis按钮添加自定义的columns函数，用于重排序列选项
• 函数内获取所有列的DOM节点，提取列标题文本并按字母顺序排序
• 将排序后的列数组返回，按钮就会按新顺序渲染选项

示例代码：

$('#your-table-id').DataTable({
  serverSide: true,
  ajax: '/your-server-api',
  columns: [
    { data: 'id', title: '编号' },
    { data: 'username', title: '用户名' },
    { data: 'create_time', title: '创建时间' },
    { data: 'status', title: '状态' }
  ],
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'colvis',
      columns: function(dt) {
        // 获取所有列的DOM节点数组
        const columns = dt.columns().nodes().toArray();
        // 按列标题文本进行不区分大小写的字母排序
        return columns.sort((a, b) => {
          const titleA = $(a).find('th').text().trim().toUpperCase();
          const titleB = $(b).find('th').text().trim().toUpperCase();
          return titleA.localeCompare(titleB);
        });
      }
    }
  ]
});

关键说明 #

1. 排序逻辑：使用localeCompare方法处理字母排序，自动适配多语言字符，转成大写是为了避免大小写导致的排序偏差
2. 不影响服务器端处理：该操作仅改变按钮选项的显示顺序，不会修改列的索引、数据绑定关系，完全兼容服务器端模式
3. 自定义扩展：如果需要特殊排序规则（比如忽略某些前缀、按特定关键词排序），只需修改sort函数内的比较逻辑即可

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