Question

我的JQuery数据表有几个选项可以清除DataTable并通过WebSockets加载新数据。因此我用fnClearTable()清除表内容，片刻后我通过WebSocket获取新数据。

这可以持续几秒钟，同时我想在我的DataTable中显示加载图像。我怎样才能做到这一点？

我的事件处理程序清除DataTable ：

/* On Daterange change (e.g. Last 3 Days instead of Last 24h) */

    $('#profitList_dateRange').change(function() {
        var dateRangeHours = $("#profitList_dateRange").val();
        var jsonParamObject = JSON.parse(dateRangeHours);

        // Clear table
        var profitList = $('#profitList').dataTable();
        profitList.fnClearTable(); // Now I want to show the loading image!
        socket.emit('load-statistics', (jsonParamObject));
    });

Answer 1

实现它的一种方法是，如果你有2个div（我假设你的div正确地设置了它们内部的内容）：

<div id="profitList"> your table content </div>
<div id="profitListLoading"> show loading here </div>

然后在你的处理程序中：

$('#profitList_dateRange').change(function() {
        var dateRangeHours = $("#profitList_dateRange").val();
        var jsonParamObject = JSON.parse(dateRangeHours);

        // Clear table
        var profitList = $('#profitList').dataTable();
        profitList.fnClearTable(); // Now I want to show the loading image!
        $('#profitList').hide();
        $('#profitListLoading').show();
        socket.emit('load-statistics', (jsonParamObject));
    });

在处理加载的数据时，你应该知道。恢复变更

        $('#profitList').show();
        $('#profitListLoading').hide();

Answer 2

确保您拥有processing: true

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

然后添加：

$('.dataTables_processing', $('#example').closest('.dataTables_wrapper')).show();

如果要添加GIF图像，可以按如下方式更改标记：

$('#example').dataTable({
  oLanguage: {
    sProcessing: "<img src='https://d13yacurqjgara.cloudfront.net/users/12755/screenshots/1037374/hex-loader2.gif'>"
  },
  processing: true
});

DEMO ：http://jsfiddle.net/0m6uo54t/2

处理：

启用或停用＆＃39;处理＆＃39;指示时正在处理表（例如，排序）。这特别有用对于具有大量数据的表格，它可能需要注意对条目进行排序的时间量。

https://datatables.net/reference/option/processing

[更新] bProcessing是旧版选项，新DT代码使用processing

清除DataTable时显示加载gif

2 个答案: