Невозможно использовать html () внутри поискового события search.dt с DataTables для добавления сообщения о загрузке - PullRequest
Новая
       73

Невозможно использовать html () внутри поискового события search.dt с DataTables для добавления сообщения о загрузке

0 голосов
/ 17 июня 2020

Я использую DataTables и добавляю прослушиватель для события search.dt с намерением показать сообщение о загрузке во время выполнения поиска с последующим удалением этого сообщения (или отображением сообщения о завершении поиска, пока тестирование) один раз вызывается draw.dt.

Я успешно записываю сообщения в консоль для каждого события соответственно, но по какой-то причине только на draw.dt могу ли я успешно обновить DOM, чтобы отобразить сообщение. Я использовал тот же код в search.dt, но я не вижу никаких изменений в HTML, которые я пытаюсь изменить, чтобы отобразить мое сообщение о загрузке. См. Ниже. 

let table = $('#product-table').on( 'search.dt', function () {
   $('#form-feedback').html('Searching...'); // this DOESN'T WORK
   console.log('searching...'); // this works

} ).on( 'draw.dt', function () {
   $('#form-feedback').html('Done.'); // this works
   console.log('done searching.');  // this works

} ).DataTable({
      "lengthMenu": [10,20,25,50,100],
      "pageLength": 25,
      "order": [[ 7, "desc" ]],
      "stripeClasses":["even","odd"],
      "responsive": true,
      "dom": 'lrtip',
      "columnDefs": [
         { "visible": false, "targets": [4,5,6,7] }
       ]
    });

Консоль регистрирует мое сообщение searching... всякий раз, когда запускается новый поиск, но не отображает фактическое сообщение на странице из-за HTML, которое я пытаюсь обновить. Однако по завершении поиска на странице ДЕЙСТВИТЕЛЬНО отображается мое сообщение «Готово».

Что мне следует проверить, чтобы устранить причину этого? У кого-нибудь была эта проблема? Спасибо.

1 Ответ

0 голосов
/ 13 августа 2020

Я закончил тем, что использовал отладку при поиске, и, похоже, это работало, отображая мое searching... сообщение внутри функции отладки. Я предполагаю, что проблема была связана с событием search.dt, сразу вызвавшим перерисовку таблицы или другое событие. Я использовал Loda sh debounce , и приведенное ниже решение дало мне то, что я искал. Может быть, это будет полезно для кого-нибудь, если они go похожий маршрут. 

var query = undefined;

// when search input changes...
$('#search-input').keyup( function () {

   // if there's been no change to the field then do nothing
   if (query === this.value) {
      return;
   }
   // update with the value entered
   query = this.value;

   /* Wait until at least 2 characters have been entered, or user has cleared the input */
   if (this.value.length >= 2 || (!this.value)) {
      // run our debounce search function
      debouncedSearchDraw(query);
   }
} );

// the debounce search function
var debouncedSearchDraw = debounce(function(val) {

  // successfully display searching message to user
  $('#form-feedback').html('Searching...');

  // search and redraw the table with the results
  table.search(val).draw();
  
  // after drawing the table remove the searching message
  $('#form-feedback').html('');
  
}, 750);
...