JQuery DataTableset.net 第一个和最后一个事件？

Question

我有一个在 JQuery 中加载并通过 JQuery DataTable.net 显示为表格的数据集

我发出销毁命令，然后根据特定参数再次创建表：

    $('#mytables').DataTable().destroy();
    $("table tbody").empty();
    $.each(myobject, function(i, obj) {
        counter++;
        $("table tbody").append( 
            "<tr>" +
            "<td id=\"s"+obj.Session_ID+"\" class=\"list\">"+           
                counter + 
            "</td>" +
            "</tr>"
    })

    $('#mytables').DataTable( {
        order: [[ 0, "desc" ]],
        paging: false,
            "columnDefs": [ {
              "targets": 'no-sort',
              "orderable": false,
        } ]
    } );

由于有时可能需要一秒钟或更长时间，我想在页面上放置一个“正在加载”的 div，并在数据表准备好后将其删除。

<div class="modal2"><!-- Place at bottom of page --></div>  

$("body").addClass("loading");  

$("body").removeClass("loading");   

问题是我几乎尝试了所有 DataTables 事件，但要么它们没有按我预期的顺序执行（因此加载 div 仍然可见），要么它们发生得太快而无法看到加载 div。

我应该将加载和卸载我的“加载” div 的代码放在哪些事件中？

注意：数据不是通过 AJAX 检索的

编辑

以下代码，根据文档应该可以工作，在表格实际重绘之前隐藏“加载”模式......

    $('#mytables').DataTable( {
        order: [[ 0, "desc" ]],
        paging: false,
            "columnDefs": [ {
              "targets": 'no-sort',
              "orderable": false,
        } ],
        "initComplete": function(settings, json) {
                        $("body").removeClass("loading");  //doesn't work... it has no time to show the loader... :-(
                        console.log('done');
                    }
    });

EDIT2

好的，我已经解决了我的问题：实际上我在页面中加载了太多静态内容 (200kb) 以加载到 javascript 变量中，Chrome 确实抱怨它花费了很长时间。

这就是为什么我有很多秒没有活动或“加载” div 的原因。

我将静态内容移至 ajax 调用（这样数据加载现在是异步的），并使用“beforeSend”和“完成”ajax 事件来添加和删除“正在加载”的 div。

注意数据表：

我尝试对数据表事件（在搜索/排序的情况下）做同样的事情，但没有成功（现在对我来说这不是一个大问题，因为现在重绘发生得很快）...

Answer 1

preInit 事件由 DataTables 在初始化表并即将请求数据时发出。

文档：preInit

initComplete 事件在您的表完全初始化时发出。

文档：initComplete

Answer 2

我为你做了一个插件，应该可以随心所欲地工作。

阅读评论以了解其工作原理。

// Jq plugin
(function ($)
{
  jQuery.fn.loader = function (parent)
	{
    var parent = $(this);
    var loader;
    var timeout;
    var helper = {
    start: (func)=>{
    helper.stop();
    // if operation get longer then 100ms then start the loader
    // you could inc or dec as you like
    timeout= setTimeout(()=>{
       loader= $('<div class="loading"> </div>');
       parent.append(loader);
       },100) 
        helper.operation(func);
       return helper;
    },
    stop: ()=>{
      clearTimeout(timeout);
      parent.children(".loading").remove();
      return helper;
    },
    operation: function(func){
    // this is a test only you can dec from 1000ms to 100
      setTimeout(()=> {
      func(helper);
      },1000);
      return helper;
    }
   };
   return helper;
}
    
}(jQuery));



var helper = $("body").loader().start((loader) =>{
// your operations eg destroy table
var count =0;
while(count<10000)
count++
loader.stop()
});

.loading{
width:100%;
height:100%;
background:black;
position:fixed;
top:0;
left:0;
}

.loading::before{
content:"loading";
color:white;
position:fixed;
top:50%;
left:50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dt"> </div>