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 «loading» и удалить его, как только данные будут готовы.

<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

Хорошо, у меня естьРазобрал мою проблему: на самом деле я загрузилслишком много статического содержимого (200 КБ) на странице для загрузки в переменную javascript, и Chrome пожаловался на то, что это заняло много времени.

По этой причине у меня было много секунд без активности или "загрузки" div.

Я переместил статический контент в вызов ajax (чтобы загрузка данных теперь была асинхронной), и яиспользовал «beforeSend» и «complete» события ajax для добавления и удаления «loading» div.

ПРИМЕЧАНИЕ для datatables:

Я пытался сделать то же самое для событий datatables (в случае поиска / сортировки), но безуспешно (в любом случае это не большая проблема дляменя сейчас, как перерисовка происходит сейчас быстро) ...

Answer 1

Я сделал вам плагин, который должен работать так, как вам нравится.

Прочитайте комментарий, чтобы понять, как это работает.

// 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>

Answer 2

preInit событие генерируется DataTables, когда таблица инициализируется и собирается запросить данные.

Документы: preInit

initComplete событиевыдается, когда ваша таблица полностью инициализирована.

Документы: initComplete