Question

使用ajax源数据和服务器端模式的DataTables 1.10.16。

我的表具有以下初始化代码：

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"属性-当数据准备好由DataTables呈现时，它显示FontAwesome微调器（.fa-spinner）； 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 reference ：（为清楚起见而设置）

请注意，通过服务器端处理，仅使用Ajax从客户端获取数据处理。

因此，在您的情况下-使用服务器端处理，将永远不会显示加载消息/指示符。

但是，它实际上是一个简单的表行（tr）元素，DataTables将其添加到表主体（tbody）中，因此您可以从{{1 }} option/function。

在下面的示例中，我使用jQuery.ajax()发出AJAX请求，并使用tr选项显示加载消息：

Demo on CodePen

ajax

如果您的beforeSend选项是对象（DataTables只是传递给$(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…</td>' + '</tr>' ); }, success: function(res){ callback(res); } }); } } ); } );），则：

ajax

注意：根据您的表，将jQuery.ajax()更改为表ID，并将$(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…</td>' + '</tr>' ); } } } ); } );的值更改为适当的值。

Answer 2

只需将这些行添加到datatable函数中

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

Answer 3

您应该设置DataTables的dom选项。它的默认值为lfrtip。 r代表p r 处理显示元素。将其与具有所需值的language.processing选项结合。

此外，我注意到您在服务器端模式打开的情况下使用ajax源数据。如文档中所述，language.loadingRecords仅在通过客户端处理用ajax源数据进行初始化时才可以使用。

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

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

3 个答案: