Vue2环境下JQuery DataTables不使用Ajax实现服务端处理的方法

该需求完全可以实现，推荐使用DataTables的自定义ajax函数方案，既可以保留你现有的wretch自定义取数逻辑（含授权处理），也能完整使用serverSide模式下的分页、搜索、排序特性。

具体实现步骤 #

修改DataTables初始化配置，开启serverSide，将原有data配置替换为自定义ajax函数，函数内部调用你自己的取数逻辑即可，参考代码如下：

...
mounted: function () {
  this.dataTable = window.$(this.$el).DataTable({
    serverSide: true, // 开启服务端模式
    processing: true, // 可选：加载数据时展示loading提示
    columns: this.getColumns,
    // 自定义ajax函数接管请求逻辑
    ajax: async (dtParams, callback, errorCallback) => {
      try {
        // dtParams是DataTables自动生成的参数，包含分页、搜索、排序所有所需字段
        // 可以按需转换参数格式后传给你自己的取数方法
        const serverRes = await this.getGridData(dtParams)
        // 你后端已经适配了DataTables服务端响应结构，直接传入回调即可
        callback(serverRes)
      } catch (err) {
        errorCallback(err)
      }
    }
  });
},
...

注意事项 #

• 你的自定义取数方法getGridData接收参数后直接传给后端做分页、过滤、排序处理即可，现有后端逻辑无需额外调整。
• 如果后端接收参数的命名规则和DataTables默认生成的参数名不一致，可在调用取数方法前对参数做自定义转换即可。
• 需要手动刷新表格数据时，直接调用this.dataTable.ajax.reload()即可自动触发自定义请求逻辑。

备选方案（不使用ajax配置） #

如果确实不想用ajax配置项，也可以通过监听表格的分页、搜索、排序事件，手动触发取数后更新表格：

mounted: function () {
  this.dataTable = window.$(this.$el).DataTable({
    serverSide: true,
    columns: this.getColumns,
    data: []
  });
  // 监听操作事件触发自定义请求
  this.dataTable.on('page search order', async () => {
    const dtParams = this.dataTable.ajax.params()
    const res = await this.getGridData(dtParams)
    // 手动更新表格数据和统计参数
    this.dataTable.clear()
      .rows.add(res.data)
      .draw(false)
    this.dataTable.page.info().recordsTotal = res.recordsTotal
    this.dataTable.page.info().recordsFiltered = res.recordsFiltered
  })
  // 首次加载触发
  this.dataTable.trigger('search')
},

注意该方案需要自行维护分页统计参数，容易出现计数异常，优先级低于自定义ajax函数方案。

内容的提问来源于stack exchange，提问作者bruce