Сообщение о загрузке DataTables не отображается при использовании обработки на стороне сервера

Я прочитал Загрузка сообщения с использованием таблиц данных

DataTables 1.10.16 с использованием исходных данных ajax и серверного режима.

Моя таблица имеет следующий код инициализации:

var substancesTable = $('#substancesTable').DataTable({
    "processing": true,
    "serverSide": true,
    "searching": false,

   "ajax": function(data, callback){
       // code for ajax request
   },
   "language": {
        "lengthMenu": "_MENU_ per page",
        "zeroRecords": "Sorry no records found",
        "info": "Showing <b>_START_ to _END_</b> (of _TOTAL_)",
        "infoFiltered": "",
        "infoEmpty": "No records found",
        "processing": '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
    },
});

DataTables правильно использует свойство "processing" - он показывает счетчик FontAwesome (.fa-spinner), когда данные готовы для визуализации с помощью DataTables; что происходит, когда запрос ajax завершен.

Однако я хочу показать сообщение, например «Загрузка данных ...», пока выполняется запрос ajax.

Таким образом, в совете по предыдущей ссылке SO говорится об использовании свойства loadingRecords в language. Итак, я добавил это:

"language:" {
    // ...
    "loadingRecords": "Loading data..."
}

Это ничего не делает.

Кроме того, я бы предпочел использовать что-то похожее на мой оверлей, который я установил с помощью свойства processing. Я считаю, что использование loadingRecords только добавляет строку в таблицу, пока завершается процесс ajax, что в любом случае не идеально.

Я ничего не вижу в документации DataTables по этому поводу.

Какие у меня есть варианты? Как сообщить пользователю, что запрос AJAX обрабатывается? Это происходит довольно часто, поскольку некоторые поиски в моем приложении занимают> 4 секунд из-за характера данных, которые ищутся.

На веб-сайте DataTables есть противоречивая (и неверная) информация: https://datatables.net/forums/discussion/41654/how-to-display-a-progress-indicator-for-serverside-processing говорит, что для этого можно использовать свойство processing вопрос. Но https://datatables.net/reference/option/language.processing (правильно) говорит, что это «когда таблица обрабатывает действие пользователя». По моему опыту, processing срабатывает только тогда, когда DataTables выполняет некоторую работу на стороне клиента (т.е. обновляет таблицу), и не имеет ничего общего с ожиданием данных на стороне сервера.


jquery datatables
person Andy    schedule 11.02.2019    source источник

Ответы (3)


arrow_upward
10
arrow_downward

Согласно language.loadingRecords справке: (отформатировано для ясности)

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

Таким образом, в вашем случае, использующем обработку на стороне сервера, сообщение / индикатор загрузки никогда не появится.

Однако на самом деле это простой элемент строки таблицы (tr), который DataTables добавляет в тело таблицы (tbody), поэтому вы можете вручную добавить tr из своего ajax опция / функция.

Вот пример, в котором я использовал jQuery.ajax() для выполнения запроса AJAX, а параметр beforeSend для отображения сообщение загрузки:

Демонстрация на CodePen

$(document).ready(function() {
  $('#example').DataTable( {
    serverSide: true,
    processing: true,
    language: {
      processing: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
    },
    ajax: function(data, callback){
      $.ajax({
        url: 'http://example.com/path/to/some-file',
        'data': data,
        dataType: 'json',
        beforeSend: function(){
          // Here, manually add the loading message.
          $('#example > tbody').html(
            '<tr class="odd">' +
              '<td valign="top" colspan="6" class="dataTables_empty">Loading&hellip;</td>' +
            '</tr>'
          );
        },
        success: function(res){
          callback(res);
        }
      });
    }
  } );
} );

И если ваша опция ajax - это объект (который DataTables просто передает в jQuery.ajax()), тогда:

$(document).ready(function() {
  $('#example').DataTable( {
    serverSide: true,
    processing: true,
    language: {
      processing: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
    },
    ajax: {
      url: 'http://example.com/path/to/some-file',
      beforeSend: function(){
        // Here, manually add the loading message.
        $('#example > tbody').html(
          '<tr class="odd">' +
            '<td valign="top" colspan="6" class="dataTables_empty">Loading&hellip;</td>' +
          '</tr>'
        );
      }
    }
  } );
} );

Примечание. Измените example на идентификатор вашей таблицы, а значение colspan на соответствующее значение в зависимости от вашей таблицы.

person Sally CJ    schedule 14.02.2019
comment
Это действительно полезный ответ, спасибо за то, что так хорошо это объяснили. В моем случае мне пришлось немного адаптировать его, поскольку я использую настраиваемую функцию ajax для отправки некоторых данных формы в конечную точку, которая выполняет сложный поиск. Однако использование beforeSend: внутри этого вызова ajax и добавление предложенной разметки делает именно то, что нужно. - person Andy; 15.02.2019
comment
Привет, Энди, я рад, что тебе это помогло. :) - person Sally CJ; 15.02.2019

arrow_upward
0
arrow_downward

Просто добавьте эти строки внутри функции datatable

language: {
  processing: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
},
person sudin    schedule 20.08.2020

arrow_upward
-1
arrow_downward

Вам следует установить параметр dom в DataTables. По умолчанию он имеет значение lfrtip. r означает p r отображающий элемент обработки. Совместите его с опцией language.processing с желаемым значением.

Кроме того, я заметил, что вы используете исходные данные ajax с включенным серверным режимом. Как подробно описано в документации, language.loadingRecords следует использовать только в том случае, если вы инициализация данными из источника ajax с обработкой на стороне клиента.

$('#example').dataTable({
    "dom": 'lrtip',
    "language": {
        "processing": 'Loading data...'
     }
});
person Matthew Miranda    schedule 13.02.2019
comment
Это не работает. Он не показывает загрузку данных ... в любой момент. - person Andy; 14.02.2019