如何在没有 Ajax 的情况下在 JQuery DataTables 中使用服务器端处理

Question

我正在使用 JQuery DataTables with Vue 2. The below snippet shows how I'm using it with a JSON data source fetched from a custom method using the wretch 包（它也处理授权）。

...
mounted: function () {
  this.dataTable = window.$(this.$el).DataTable({
    data: this.getGridData,
    columns: this.getColumns,
    // serverSide: true
  });
},
...

这个方法工作正常。现在我想在不使用 ajax 选项的情况下启用 serverSide 功能来控制 pagination 和 search。

我的后端应用程序是 .NET Framework 中的运行。我已经创建了我的响应数据结构，如图所示 here，但它似乎没有帮助。

简单地说，我想在使用 serverSide 功能时使用我的 自定义方法 将数据提取到数据表中。

这可能吗？期待您的帮助。

Answer 1

DataTables 的 ajax 选项有多种不同的形式。

其中之一如下：

$('#example').dataTable( {
  "serverSide": true,
  "ajax": function (data, callback, settings) {
    // whatever logic you want to use can go here,
    // as long as it evaluates to a valid JSON structure
    // expected by DataTables, as a server-side response.
    callback(
        resultsOfYourLogic  
    );
  }
} );

您可以在 linked 文档中阅读它的描述 - 但它基本上指出：

As a function, making the Ajax call is left up to yourself allowing complete control of the Ajax request. Indeed, if desired, a method other than Ajax could be used to obtain the required data...

因此，您可以将此与 serverSide: true 一起使用，以使用您希望获取数据的任何替代方法。

示例：

"ajax": function (data, callback, settings) {
  var dataSet = yourCustomFunction(data);
  callback(
    dataSet 
  );
},

这里先调用自定义函数，返回需要显示的JSON。请求数据被传递给该自定义函数。然后将该自定义函数的结果放在回调中。

此处的一个重要说明是：回调中的 data 参数将预先填充 server-side request 数据（每当用户 sorts/filters/pages 时由 DataTables 自动创建）。所以你将需要处理这个请求数据，以了解你的响应数据需要如何构建。

（您在问题中 link 的响应数据结构是正确的结构。）

如何在没有 Ajax 的情况下在 JQuery DataTables 中使用服务器端处理

How to use server-side processing in JQuery DataTables without Ajax

javascript

jquery

datatables

vue.js