Question

我正在扩展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错误响应（这是我的应用程序在您超时时发送的内容）来捕获此信息，但后来我不知道如何“刷新”dataTables以进行“处理”消息消失，以便您可以继续使用该应用程序。

请注意，我在.js文件中扩展默认值 - 我不知道DataTables此时将绑定哪个元素。

如何从ajax / error回调中“修复”dataTable？

Answer 1

备注

您不应该覆盖ajax.error，因为此属性由DataTables在内部使用，同样适用于ajax.success。

<强>解

您可以为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}); */ } });

<强>样本

请参阅this jsFiddle以获取代码和演示。

Answer 2

每the documentation，ajax可以是一个函数。它使用表settings object调用，可用于为表构造新的API对象。然后，您可以使用API方法获取处理元素（使用.dataTables_processing）或使用其他可用的API methods采取您喜欢的任何其他操作。具体来说，这样的事情应该有效：

{
  "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对象。使用它可能是实现目标的更直接的途径，但我认为上述内容更符合预期用途。

如何从ajax / error回调中刷新DataTables？

2 个答案: