清除数据表时显示加载 gif

Question

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

这可能会持续几秒钟，同时我想在我的 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));
    });

在处理加载的数据时，您应该ofc。还原更改

        $('#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
});

演示：http://jsfiddle.net/0m6uo54t/2

处理：

启用或禁用“处理”指示器的显示，当 正在处理表（例如排序）。这个特别有用 对于具有大量数据的表，它可能需要一个明显的 对条目进行排序的时间。

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

[UPDATE] bProcessing 是旧选项，新的 DT 代码使用 processing