jQuery datatable - 更新“正在处理..“消息在 x 秒后

jQuery datatable - update "Processing..." message after x seconds?

本文关键字：消息 消息在 秒后 正在处理 处理 更新 datatable jQuery      更新时间：2023-09-26

我正在使用带有Bootstrap v2的jQuery数据表。当页面首次加载时，它会显示"正在处理..."这很好。当我更改页面或排序时，它还会显示此消息 - 也很好。

大多数情况下，后端的数据库速度很快，"正在处理"消息仅在屏幕上显示一秒钟或更短的时间。

但是，在某些情况下，例如，如果他们正在对大量行进行搜索，则可能需要几秒钟才能完成此操作。

我想这样做，如果 x 秒后仍然显示处理消息，我会以某种方式更新它 - 例如更改样式以添加背景颜色：周围黄色，和/或将消息更改为"处理时间更长。请稍候..."。

我认为第一步是绑定到 Filter 事件。我能够做到这一点。但是我无法弄清楚如何绑定到表的初始加载，该表执行处理...并且可能需要一段时间，具体取决于查询。

同样，我认为这可能是一件相当普遍的事情，所以我想知道是否有人可以共享一段附加到必要事件的代码片段，并会自动找到处理div 并在 x 秒后即时更新它，然后清除它以便下次它执行处理......消息它再次开始，假设它会很快并且仅在 x 秒后更改。

提前感谢！

您可以尝试使用 fnPreDrawCallback 启动超时，然后使用 fnDrawCallback 清除超时（并重置消息状态）。

我在手机上输入了这个，所以请原谅任何错误：

$(document).ready(function() {
    var extendedLoadingTimer,
        setExtendedLoadingMessage = function(){
            // Do the stuff to change the message
            // Like adding a css class and changing the text
        },
        resetLoadingMessage  = function(){
            // Do stuff to reset the message back to it's starting state
            // Like removing the css class and resetting the text
        };
    $('#your-table-id').dataTable({
        // Add your other data table options here ...
        "fnPreDrawCallback": function() { 
            // Start the timer
            extendedLoadingTimer = setTimeout(function(){
                // When the timer is done ( after 400 miliseconds ) 
                // update the message
                setExtendedLoadingMessage();
            }, 400);
        },
        "fnDrawCallback": function() {
            // Stop the timer from changing after its done ( although 
            // it might already be done at this point )
            clearTimeout(extendedLoadingTimer);
            // Whether the timer was done or not, always reset 
            // the message back to its original state
            resetLoadingMessage();
        }
    });
});
相关文章：