在 html 的一部分中构建表格时显示加载图像

Question

我有下面的 sn-p 代码，它基本上在数据表中构建了很多行。这是demo。我正在尝试使用 slepp 在这里模拟一个大数据集。

    //START:: show a loading message on the screen 
    //draw my rows 
    _.each(file, function(row) {
    //sleep(5000)
    t1.addRows(row)
    }); 
    //END:: STOP showing a loading message on the screen 

并且我希望能够向用户显示它正在加载。

我该怎么做。

我有以下链接，但我似乎无法让它们工作

https://stackoverflow.com/a/3617657/2392358

https://stackoverflow.com/a/16485533/2392358

我想使用其中一张图片

我正在考虑使用其中一个.gif 文件在加载时显示。

Answer 1

解决方案

添加以下初始化选项：

processing: true

更改添加新行的代码

$(".dataTables_processing").show();

setTimeout(function(){
    _.each(file, function(row) {
        t1.addRows(row)
    });  

    t1.oTable.draw();

    $(".dataTables_processing").hide();
}, 100);

演示

有关代码和演示，请参阅this jsFiddle。