Question

我有一个数据集，该数据集已加载到JQuery中，并通过JQuery DataTable.net显示为表格

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

Marshalling A!
Marshalling B!
<A>
  <B>
    <C/>
  </B>
</A>

一段时间后，我想在页面上放置一个“正在加载”的div，并在数据表准备好后将其删除。

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

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

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

注意：无法通过AJAX检索数据

EDIT

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

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

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

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

EDIT2

好吧，我已经解决了我的问题：实际上，我在页面中加载了太多的静态内容（200kb），无法加载到javascript变量中，而Chrome浏览器确实抱怨它花费了很长时间。

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

我将静态内容移到了ajax调用中（以便现在可以异步加载数据），并且我使用了“ beforeSend”和“ complete” ajax事件来添加和删除“ loading” div。

注意用于数据表：

我试图在datatables事件上执行相同的操作（如果进行搜索/排序），但是没有成功（因为重新绘制现在很快发生，所以现在对我来说不是一个大问题）...

Answer 1

初始化表格并要请求数据时，DataTables发出

preInit事件。

文档：https://github.com/wudics/lara

表已完全初始化后，会发出

initComplete事件。

文档：preInit

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>

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

2 个答案: