使用服务器端处理时未显示数据表加载消息

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"属性 -.fa-spinner当数据准备好由 DataTables 呈现时，它会显示一个 FontAwesome 微调器 ( )；当 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 option/function手动添加。

这是我用来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为您的表 ID，并将colspan值更改为基于您的表的适当值。