Javascript 清除数据表后显示加载gif

我的JQuery datatable有几个选项，可以清除datatable并通过WebSocket加载新数据。因此，我用

fnClearTable（）

清除了表格内容，几分钟后，我通过我的WebSocket获得了新数据

这可能会持续几秒钟，同时我希望在我的数据表中显示加载图像。我如何才能做到这一点？

清除数据表的我的事件处理程序：

/* 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));
    });

---

实现这一点的一种方法是，如果您有2个div（我假设您的div的样式与其中的内容相匹配）：

在处理加载的数据时，您应该使用ofc。恢复更改

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

---

实现这一点的一种方法是，如果您有2个div（我假设您的div的样式与其中的内容相匹配）：

在处理加载的数据时，您应该使用ofc。恢复更改

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

---

确保您有

处理：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
});

$（'#示例'）。数据表({
语言：{
sProcessing:“
},
处理：正确
});

演示：

处理：

在以下情况下启用或禁用“处理”指示器的显示： 正在处理表（例如，排序）。这尤其有用 对于具有大量数据的表，在这些表中可能需要 对条目进行排序的时间量

---

[更新]

b处理

是传统选项，新的DT代码使用

处理

确保您有

处理：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
});

$（'#示例'）。数据表({
语言：{
sProcessing:“
},
处理：正确
});

演示：

处理：

在以下情况下启用或禁用“处理”指示器的显示： 正在处理表（例如，排序）。这尤其有用 对于具有大量数据的表，在这些表中可能需要 对条目进行排序的时间量

---

[更新]

b处理

是传统选项，新的DT代码使用

处理

如果隐藏了页面上的gif会怎么样。然后，一旦启动了change函数，显示它，一旦clear函数完成，通过回调再次隐藏gif。如果页面上的gif被隐藏了呢。然后，一旦启动了change函数，显示它，并且clear函数完成后，使用回调再次隐藏gif。什么是bProcessing标志？请参阅我的更新，它基本上可以显示隐藏处理div。我已经尝试了这种方法，添加了以下行

$（'.dataTables_processing'，$（'#profitList'）。最接近（'.dataTables_wrapper'））.show（）；

在fnClearTable之后放入我的更改事件处理程序，但它似乎不起作用。在创建datatable时，我已将处理设置为true。行为没有改变（它表示没有可用数据）在清除表而不是显示加载动画后。什么是bProcessing标志？请参阅我的更新，它基本上可以显示隐藏处理divI。我尝试过这种方法，添加了以下行：

$（'.dataTables\u processing'，$（'#profitList'）。最近（'.dataTables\u wrapper'）。show（）；

在fnClearTable之后插入我的更改事件处理程序，但它似乎不起作用。我在创建datatable时已将processing设置为true。行为没有改变（它表示没有可用数据）在清除表格而不是显示加载动画后。我认为这不是一个好方法，因为这不是利用“处理”div的DT功能，这意味着您将不得不担心div的样式，将其定位在正确的位置，并确保其响应性（如果您在意的话）使用

处理

选项会更好。我同意。我不知道这个功能，并提供了一个通用的解决方案。我认为这不是一个好方法，因为这没有利用“处理”的DT功能div，这意味着您将不得不担心div的样式，将其定位在正确的位置，并确保它是响应的（如果您关心这一点），使用

处理
选项将更好。我同意。我不知道这一功能，并提供了一个通用解决方案。