我正在使用带有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();
}
});
});