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

Question

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

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 выполняет какую-то работу на стороне клиента (т.е. обновляет таблицу), не имея ничего общего с ожиданием данных на стороне сервера.

Answer 1

В соответствии с 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 на соответствующее значение на основетвой стол ..

Answer 2

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

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

$('#example').dataTable({
    "dom": 'lrtip',
    "language": {
        "processing": 'Loading data...'
     }
});