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

Question

我正在使用 JQuery DataTables使用 Vue 2。下面的代码片段显示了我如何使用 wretch 将其与从自定义方法获取的 JSON 数据源一起使用。包(它还处理授权)。

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

这个方法很好用。现在我想启用 serverSide 功能来控制 pagination 和 search 而不使用 ajax 选项。

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

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

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

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  
    );
  }
} );

您可以在链接的文档中阅读它的描述 - 但它基本上是这样说的:

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。数据(每当用户排序/筛选/页面时由 DataTables 自动创建)。因此，您将需要处理此请求数据，以了解需要如何构建响应数据。

(您在问题中链接到的响应数据结构是正确的结构。)