javascript - DataTables 在加载 AJAX 数据时通知加载时间

Question

我有一些表一开始是空的，DataTables 向 WebServer 请求数据。

加载几分钟是可以的。数据表显示默认的加载消息。但我想添加一个计数器来通知加载运行了多长时间，而不是简单的加载文本或一些古怪的动画。

我在其文档中找不到执行此操作的方法。可能吗？

更新:MonkeyZeus 的回答非常有效。这是我的最终代码:

// ...
,dataTablesLoading: function(e, settings, processing ){
    setTimeout(function(){
        var targetJs = e.target;
        var target = $(targetJs);
        var timerContainer = target.find('.dataTables_empty');
//tlog(targetJs,'targetJs');
//tlog(target,'target');
//tlog(timerContainer,'timerContainer');

        if(processing){
                var timer = 0;
                var timerHandler = setInterval(function(){
                    timer++;
                    var hours = Math.floor(timer/3600);
                    var minutes = Math.floor((timer-(hours*60))/60);
                    var secs = timer-(hours*3600)-(minutes*60);

                    var timerText = hours+':'+minutes.lpad("0",2)+':'+secs.lpad("0",2);
tlog(timerText,'timerText');
//tlog(timerContainer,'timerContainer');
                    timerContainer.text("Loading... "+timerText);
                },1000);


            targetJs.setAttribute("data-loading-timer",timerHandler);
tlog(timerHandler,'timerHandler processing');
        }else{
            var timerHandler = parseInt(targetJs.getAttribute("data-loading-timer"));
tlog(timerHandler,'timerHandler not processing');

            if(timerHandler>0)
                clearInterval(timerHandler);
        }

    },1000);
}
// ...
$('#...')
    .on( 'processing.dt', Framework.utils.dataTablesLoading )
    .DataTable({...})

Answer 1

First, you will need to enable processing when invoking the datatable:

$('#example').dataTable( {
    "processing": true
} );

Next, you will need to declare what happens instead of the default Loading message using the dt namespace's processing event listener:

// This event will fire twice so pay attention to the processing parameter
$('#example').on( 'processing.dt', function ( e, settings, processing ) {
    if( processing  === true ) {
        alert('Hey, we are processing!');
        // some custom code which targets #processingIndicator and applies some timer plug-in or whatever; you figure it out.
    }
    else {
        alert('Hey, we are done processing!');
        // some custom code which targets #processingIndicator and hides it; you figure it out.
    }
} )
.dataTable();

<小时/>

此外，较长的加载时间还需要考虑用户体验方面的因素，因此请务必查看 https://ux.stackexchange.com/a/80858/45170如果您想获得更好的体验。