jQuery datatable - обновить сообщение «Обработка ...» через x секунд?

Question

Я использую jQuery datatable с Bootstrap v2. Когда страница сначала загружается, она отображает «Обработка ...», что хорошо. Он также отображает это сообщение, когда я меняю страницы или сортирую - тоже хорошо.

В большинстве случаев база данных на бэкэнд быстро и сообщение обработки отображается только на экране в течение одной секунды или меньше.

Однако в некоторых случаях, например, если они выполняют поиск по большому количеству строк, для этого может потребоваться несколько секунд.

Я хочу сделать так, чтобы, если сообщение обработки по-прежнему отображается через x секунд, я как-то его обновляю - например, изменение стиля для добавления фона: желтый вокруг него и/или изменение сообщения «Обработка дольше. Подождите ...».

Я решил, что первым шагом было привязать событие Filter. Я смог это сделать. Но мне не удалось выяснить, как привязываться к начальной загрузке таблицы, которая обрабатывает ... и может занять некоторое время в зависимости от запроса.

Аналогичным образом я полагаю, что это может быть довольно распространенная вещь, которую нужно делать, поэтому мне было интересно, может ли кто-нибудь поделиться фрагментом кода, который прикрепляется к необходимым событиям, и автоматически найдет раздел обработки и обновит его на лету после x секунд, а затем очистите его, чтобы в следующий раз, когда он обработает сообщение «Обработка ...», он снова начнет отсчет, считая, что он будет быстрым и будет изменяться только через x секунд.

Заранее благодарен!

Answer 1

Вы можете попробовать использовать fnPreDrawCallback для запуска тайм-аута, а затем использовать fnDrawCallback для очистки тайм-аута (и сброса состояния сообщения).

Я напечатал это на моем телефоне, поэтому, пожалуйста, простите ошибки:

$(document).ready(function() { 
    var extendedLoadingTimer, 
     setExtendedLoadingMessage = function(){ 
      // Do the stuff to change the message 
      // Like adding a css class and changing the text 
     }, 
     resetLoadingMessage = function(){ 
      // Do stuff to reset the message back to it's starting state 
      // Like removing the css class and resetting the text 
     }; 

    $('#your-table-id').dataTable({ 
     // Add your other data table options here ... 
     "fnPreDrawCallback": function() { 
      // Start the timer 
      extendedLoadingTimer = setTimeout(function(){ 
       // When the timer is done (after 400 miliseconds) 
       // update the message 
       setExtendedLoadingMessage(); 
      }, 400); 
     }, 
     "fnDrawCallback": function() { 
      // Stop the timer from changing after its done (although 
      // it might already be done at this point) 
      clearTimeout(extendedLoadingTimer); 

      // Whether the timer was done or not, always reset 
      // the message back to its original state 
      resetLoadingMessage(); 
     } 
    }); 
});