DataTables：如何在draw.dt事件中启用所有列的排序功能

我明白你遇到的困扰了——为了避免用户在数据加载前点击排序导致表格提示异常，你先把所有列设为orderable: false，但之后找不到正确的方法重新启用排序功能。你之前尝试的table.columns().orderable().enable()其实用错了DataTables的API，这就是为什么没效果的原因。

正确的解决思路：遍历列逐个启用排序 #

DataTables中，要设置列的排序可用状态，需要使用column().orderable( state )方法，其中state是布尔值（true表示启用，false表示禁用）。我们可以在表格第一次绘制完成的事件里，遍历所有列来逐个开启排序功能：

// 初始化表格时先禁用所有列排序
var table = $('#your-table-id').DataTable({
  ajax: 'your-data-source-url',
  columns: [
    { data: 'myData', orderable: false },
    // 其他列同样设置orderable: false
  ],
  buttons: [
    { 
      extend: 'excel', 
      text: '<i class="fa fa-file-excel-o"></i>', 
      titleAttr: 'Download to Excel', 
      enabled: false 
    }
  ]
});

// 在第一次数据加载完成后启用排序和按钮
table.one('draw.dt', function () {
  // 遍历所有列，启用排序功能
  table.columns().every(function () {
    this.orderable(true);
  });
  // 启用Excel下载按钮
  table.buttons().enable();
});

为什么用one()而不是on()？ #

因为draw.dt事件会在表格每次重绘时触发（比如用户排序、搜索后），如果用on()，每次重绘都会执行启用排序的代码，虽然不会出错，但用one()可以让这段逻辑只执行一次，更高效——毕竟我们只需要在第一次数据加载完成后开启排序就够了。

这样设置后，当Ajax完整加载数据集、表格第一次绘制完成时，所有列的排序功能会自动激活，同时Excel按钮也会解锁，完美解决你之前遇到的用户体验问题。

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