ajax - 自定义 API 的返回数据以在 Datatable 中使用

问题描述

我想将数据表与来自外部 API 的响应一起使用。这是 api 的结果（我无法修改对象的响应方式，因为它来自其他资源）：

{
"status": "success",
"code": "200",
"message": null,
"data": {
    "metadatas": {
        "page": 1,
        "pageSize": 10,
        "totalPage": 7430,
        "totalRows": 74292,
        "links": {
            "currentLink": "/product/product?pagesize=10&pagenum=1",
            "nextLink": "/product/product?pagesize=10&pagenum=2",
            "previousLink": null,
            "firstLink": "/product/product?pagesize=10&pagenum=1",
            "lastLink": "/product/product?pagesize=10&pagenum=7430"
        }
    },
    "products": [
        {
            "no": 1,
            "productName": "P-1",
            "serial": "1000041"
        },
        {
            "no": 2,
            "productName": "P-2",
            "serial": "1000042"
        }
    ]
  }
}

从我到目前为止的搜索来看，看起来我们可以使用“dataSrc”来自定义从服务器端返回的对象以满足 DataTable 的要求。我试过这样使用它：

$('#myTable').DataTable({
 processing: true,
 serverSide: true,
 ajax: {
    url: baseAddress + 'product?pagesize=10&pagenum=1',
    headers: {
        'Authorization': 'Bearer ' + token
    },
    type: 'POST',
    dataType: 'JSON',
    data: searchCriteria,
    dataSrc: function (data) {
        var data = JSON.parse(data); // Edited
        var json = {};
        json.data = data.data.products;
        console.log(JSON.stringify(json)); // Got this result : {"data":[{"no":1,"productName":"P-1","serial":"1000041",....}]}
        return JSON.stringify(json);
    },
    columns: [
        { "data": "no" },
        { "data": "productName" },
        { "data": "serial" }
      
    ]
    ]
 }
});

这就是我的身体对象（searchCriteria我发送给 API 以获得结果的方式：

{
   "category":"All",
   "branch":"All",
   "userId" : "2"
}

我在表中得到的结果是：

使用数据表中的此警报错误：

我有点卡在这里，在谷歌上找不到其他解决方案。

提前谢谢你。看待。

标签： ajaxasp.net-mvcapidatatable

解决方案

看起来您问题中的 DataTable 定义不能是您实际使用的定义，因为其中存在一些结构和语法问题：

你有columns选项里面的ajax选项，这是无效的。
]您在 DataTable 定义的末尾有一个额外的。

如果我更正这些，我可以通过用以下代码替换所有dataSrc逻辑来显示数据：

dataSrc: 'data.products'

这告诉 DataTables 查看从 API 接收到的 JSON，并使用data.products定位器查找行数据数组的位置。

这就是让数据显示在表格中所需做的所有事情：

$('#myTable').DataTable({
  processing: true,
  serverSide: true,
  ajax: {
    url: 'http://localhost:7001/products', // my test URL
    type: 'POST',
    dataType: 'JSON',
    //data: searchCriteria, // ignored for my test
    dataSrc: 'data.products'
  },
  columns: [
    { "data": "no" },
    { "data": "productName" },
    { "data": "serial" }
  ]
    
});

但是，这样做的问题是它不处理摘要信息（显示在 DataTable 下方）：

Showing 0 to 0 of 0 entries (filtered from NaN total entries)

纠正这一点很尴尬，因为serverSide通常意味着您 (a) 可以完全控制响应结构，并且 (b) 服务器知道如何处理由 DataTables 发送的自动生成的请求。在你的情况下，你没有这些东西。

澄清：“响应结构”和“自动生成的请求”是指本文档页面中描述的结构。

这里的问题是，serverSide它并不是真正设计用于与您无法控制的第 3 方 API 一起使用的。

话虽如此，您可以选择以不同的方式处理此问题：

dom使用以下选项隐藏摘要信息：

dom: 'lfrtp',

或者，您可以"totalRows": 74292从 JSON 响应中获取数据，并将其与 DataTables 期望使用的字段名称一起使用。为此，您需要使用dataSrc一个函数：

$('#myTable').DataTable({
  processing: true,
  serverSide: true,
  ajax: {
    url: 'http://localhost:7001/products',
    type: 'POST',
    dataType: 'JSON',
    //data: searchCriteria,
    //dataSrc: 'data.products' // replaced by the following...
    dataSrc: function (json) {
      var totalRows = json.data.metadatas.totalRows;
      json.recordsTotal = totalRows;
      json.recordsFiltered = totalRows;
      console.log( json );
      return json.data.products;
    }
  },
  columns: [
    { "data": "no" },
    { "data": "productName" },
    { "data": "serial" }
  ]
    
});

recordsTotal和名称是我之前从这里recordsFiltered提到的。

现在你会看到一个类似这样的页面：

这个答案故意避免与分页、排序和搜索相关的问题。这些通常由特定的服务器端代码处理，这些代码与DataTables 自动生成的请求数据相关联。

您可以处理其中的一些data: searchCriteria- 但可能需要扩展以完全支持分页、排序和搜索（当然，取决于 API 为您提供的内容）。

ajax - 自定义 API 的返回数据以在 Datatable 中使用

问题描述

解决方案

推荐阅读