显示加载gif时，DataTable已被清除

Show loading gif when DataTable has been cleared

本文关键字：清除 DataTable 加载 gif 显示      更新时间：2023-09-26

我有几个选项为我的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));
    });

实现它的一种方法是，如果你有两个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();

确保有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

相关文章：