如何从ajax/错误回调中刷新数据表

How to refresh DataTables from within ajax/error callback?

本文关键字：回调 刷新 数据表 错误 ajax      更新时间：2023-09-26

我正在扩展DataTables默认值，如下所示:

$.extend(true, $.fn.dataTable.defaults, {
    lengthChange: false,
    deferRender: true,
    displayLength: 25,
    stateSave: false,
    serverSide: true,
    processing: true,
    ajax: {
        type: 'POST',
        error: function($xhr) {
            if($xhr.status === 401) {
                wxu.openLoginBox(function(data) {
                    // HELP: how can I get the DataTables object from this context?
                });
            } else {
                wxu.notify({'text': "Could not load list", 'cssClass': 'error', timeout: 0});
            }
        }
    }
});

有时用户会注销，然后当他们尝试更改页面或排序时，它会永远显示"正在处理"。我可以通过寻找401错误响应来捕获这一点(这是我的应用程序在您超时时发送的)，但随后我不知道如何"刷新"数据表以使"处理"消息消失，以便您可以使用应用程序恢复。

请注意，我在.js文件中扩展了这里的默认值——我不知道DataTables将绑定到哪个元素。

我如何从ajax/错误回调内部"修复"数据表?

指出

你不应该覆盖ajax.error，因为这个属性是由数据表内部使用的，同样适用于ajax.success。

<

解决方案/strong>

您可以为xhr事件添加事件处理程序来处理Ajax错误(json === null)。

// Prevent alert message from being displayed
$.fn.dataTable.ext.errMode = 'none';
// Use delegated event handler
// to handle Ajax request completion event
$(document.body).on('xhr.dt', function (e, settings, json, xhr){
   // If there is an Ajax error and status code is 401
   if(json === null && xhr.status === 401){         
      var api = new $.fn.dataTable.Api(settings);
      console.log('Session expired');
/*     
      wxu.openLoginBox(function(data){
          api.ajax.reload();
      });
*/
   } else {
      console.log('Could not load list');   
/*       
       wxu.notify({'text': "Could not load list", 'cssClass': 'error', timeout: 0});
*/       
   }
});

根据文档，ajax可以是一个函数。它通过表设置对象调用，该对象可用于为表构造一个新的API对象。然后，您可以使用API方法来获取处理元素(使用.dataTables_processing)，或者使用其他可用的API方法执行您喜欢的任何其他操作。具体来说，应该这样做:

{
  "ajax": function (data, callback, settings) {
    $.ajax({
      type: "POST",
      success: function (json) {
        callback(json);
      },
      error: function ($xhr) {
        if ($xhr.status === 401) {
          var api = new $.fn.dataTable.Api(settings);
          var container = api.table().container();
          $(container).find('.dataTables_processing').hide();
        }
      }
    });
  }
}

我没有看到它具体的文档，但是this在ajax函数中被调用时也被设置为DataTable对象。使用这种方法可以更直接地达到您的目标，但我认为上述方法更符合预期用途。

相关文章：