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

Posted 2023-02-22

【中文标题】如何在没有 Ajax 的 JQuery DataTables 中使用服务器端处理

【英文标题】：How to use server-side processing in JQuery DataTables without Ajax

【发布时间】：2021-09-21 23:43:29

【问题描述】：

我在 Vue 2 中使用 JQuery DataTables。下面的 sn-p 显示了我如何将它与 JSON 数据源一起使用 从自定义方法获取 使用 wretch 包（它还处理授权）。

...
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 中。

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

【参考方案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  
    );
  
 );

您可以在链接的文档中阅读它的描述 - 但它基本上说明：

作为一个函数，Ajax 调用由您自己决定，允许完全控制 Ajax 请求。实际上，如果需要，可以使用 Ajax 以外的方法来获取所需的数据...

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

例子：

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

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

这里的一个重要注意事项是：回调中的data 参数将预先填充server-side request 数据（在用户排序/过滤/页面时由DataTables 自动创建）。因此，您将需要处理此请求数据，以了解您的响应数据需要如何构建。

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

【讨论】：

太棒了！完美的解决方案。谢谢。