dataTables - 如何使所有列在“draw.dt”上可排序答案

【问题标题】：dataTables - how to make all columns orderable on 'draw.dt'dataTables - 如何使所有列在“draw.dt”上可排序
【发布时间】：2018-05-24 20:37:16
【问题描述】：

我有一个数据集，它通过 Ajax 检索到数据表中，并且存在时间延迟，这意味着用户可以在加载之前执行操作。我必须一次全部加载这个数据集，所以这次我不能使用服务器端处理来分块提供它。

我正在使用 dataTables 按钮在其上下载 xls，在数据集到达之前我将其禁用，然后重新启用。如果我不这样做，用户可以在 ajax 请求完成之前下载一个空的电子表格。所以，对于按钮，我是这样编码的：

buttons: [
        {
            extend: 'excel',
            text: '<i class="fa fa-file-excel-o"></i>',
            titleAttr: 'Download to Excel',
            enabled: false
        },
    ],

然后：

table.on( 'draw.dt', function () {
    table.buttons().enable();
});

我需要对可排序列执行相同操作，因为如果在加载数据之前单击可排序列，则显示的消息会从“正在加载”更改为“表中没有可用数据”（可以理解），但这不是很好用户体验。

我将每一列设置为orderable: false，如下所示：

columns: [
        {
            data: 'myData', 
            orderable: false, // all columns are set to false like this
        },

这行得通，它设置了所有列，因此它们不能被排序。我不能做的是在数据加载后让它们都可以排序。

我希望可能是这样的，但我尝试的任何方法都行不通：

table.on( 'draw.dt', function () {
    table.columns().orderable().enable();
});

有什么想法吗？如果我必须单独启用每一列，那也没关系，我也找不到这样做的方法。

提前致谢。

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

在初始化期间设置orderable: false，然后用table.columns().orderable().enable(); 更改它不起作用的原因是orderable: false 是一个初始化选项。由于 DataTables 的工作方式，您在初始化完成后无法更改初始化选项。这意味着您需要在数据加载时找到其他禁用排序的方法。

就个人而言，如果这只是初始加载，我会用style="display: none;" 隐藏表格，直到您可以调用initComplete 回调，然后只需调用$(...).show();。如果您不想只隐藏整个表格，您可以选择性地隐藏标题（可能是$.("#table thead").hide();），并在加载后显示它们。

对于我正在开发的网站，我们遇到了类似的情况，一次加载了大约 50k 行。我使用$.blockUI() 在执行ajax 调用时在表格上放置一个自定义弹出窗口阻止程序。我认为这个解决方案具有最好的 UI 体验。您可以使用$.blockUI() 选择性地在表格上应用阻止模式，并带有自定义加载消息。

【讨论】：