【问题标题】:Fire event when datatables sorting is complete数据表排序完成时触发事件
【发布时间】:2024-04-27 14:40:02
【问题描述】:

我正在初始化我的数据表,一切正常,除了我的某些列需要很长时间(3-5 秒)进行排序。我只有大约 350 行,但大约有 25 列(并非一次全部可见)。

我正在做这样的事情来使列可见然后排序。

$('#main_index').on('click', 'thead th', function() { 

                        var idx = table.column(this).index();
                        selected_data = table.column(idx).dataSrc();

    if (selected_data == 'diabetes_full') {
                                table.order([4, 'desc']);

                                table.columns('.col_rank').visible(false);
                                table.column(3).visible(true);
                                 table.draw();
                                $(".rank").hide();
                                $("#diabetes_full_rank").show();

                            } else if (selected_data == 'pop_with_diabetes') {
                                table.order([6, 'desc']);
                                table.columns('.col_rank').visible(false);
                                table.column(5).visible(true);
                                 table.draw();
                                $(".rank").hide();
                                $("#pop_with_diabetes_rank").show();
                            }
});

就像我说的,这可行,但有时有点慢。我不确定我是否能找到加快速度的方法(欢迎提出建议),但我希望能够在排序仍在进行时显示加载消息,并在排序完成时将其隐藏。

我已经尝试了各种使用 table.draw() 的方法,包括:

$.when(table.draw()).then(//function to hide loading message);

我尝试过使用drawCallback 和其他几个。我注意到的是表格绘制基本上是瞬时的,但排序的实际完成是在此之后。但是,我不知道如何将事件绑定到排序完成,或者数据表是否有办法处理这个问题。有什么建议吗?

【问题讨论】:

  • 如果您已经有默认排序工作,您可能会通过自己调用draw() 与它发生冲突。注释掉以上是正常速度吗?
  • 你能用processing: true吗?
  • @Gyrocode.com 这似乎没什么区别。
  • @charlietfl 我认为这可能是问题所在。你是说我不需要在我的代码中使用draw() 吗?
  • 说实话,不确定哪个抽奖会先发生。可能是内部的,因为事件处理程序会在您之前添加。很好奇,当您在没有代码的情况下进行排序时有什么区别。还认为事件 api 会更好地挖掘。如果在排序之前发生事件,您可能只需要修改选项然后可能不需要自己调用 draw

标签: javascript jquery sorting datatable datatables


【解决方案1】:

我想你会想听订单事件。
order 事件 - 当表中包含的数据被排序时触发。 你可以在这里找到更多信息https://datatables.net/reference/event/。 您可以在此处阅读有关如何收听数据表事件的更多信息:https://datatables.net/manual/events

编辑

我重新阅读了您的问题,并意识到我可能对您需要使用的特定事件有误。如果您说要在重新排序列后触发操作(这实际上是我认为您想要的),您将需要查看 column-reorder(列已由最终用户或 API 重新排序)。信息在同一个链接上。

【讨论】:

  • 订单事件似乎在订单启动时触发,而不是在完成时触发(至少这是它在我的桌子上的工作方式)。