将 Ajax 与 jQuery DataTables 结合使用时，如何确定如何处理返回的数据？

像许多其他人一样，我查看类似问题的各种答案，在网上搜索示例等，但除非我碰巧找到我遇到的几乎相同的情况，否则我无法弄清楚如何让 DataTable 填充阿贾克斯呼叫。我认为如果有人能够解释所发生的步骤以及如何使用 DataTables 的 Ajax 调用的各种参数来根据返回的方式获取正确形式的数据，将会很有帮助。

例如：

json returned from get_all_accounts.php

{"accounts":{"account":[{"accountid":"2066","email":"Master (Blank) Defaults Acct","fullname":"Test","account_status":"Active","create_date":"2\/19\/2010 2:58:12 PM","last_login":"2\/19\/2010 3:03:43 PM","subscription_level":"Gold","license_type":"Test\/Free","group_name":"Default Accounts"},{"accountid":"2169","email":"[email protected]"......}]}}

现在，在网页中，我有：

$(document).ready(function() {
    oTable = $('#users').DataTable({
    processing: true,
    bStateSave: true,
    ajax: {
        url: "./get_all_accounts.php",
                        dataType: "JSON",
        dataSrc: ""
    },
    columns: [
        { data: "accountid", width: "5%" },
        { data:  "email" , width: "25%" },
        { data:  "fullname" },
        { data:  "group_name" },
        { data: "subscription_level" },
        { data: "account_status" },
        { data: "license_type" },
        { data: "create_date" }
    ]
    });

我已经尝试了 dataSrc 的各种操作，例如“accounts”、“accountid”、“accounts:account”。我无法更改传入的数据。我相信这是有效的 json。如何描述返回数据的形式？我对另一个返回的数据源执行相同的操作：

{"data":[{"0":"55","id":"55","1":"2020-01... 和 javascript:

... 数据源：“数据” }, 列： [ { 数据：“id”，宽度：“5%”}， { 数据：“电子邮件”，宽度：“25%”}， ...

完美地处理它。我能看到的唯一区别是，在这种情况下，我们有 {data:[{ row data },{row data}])，而在问题一中，还有一层结构，即。

    {accounts:{account:[{row data},{row data} ...

一般来说，人们如何处理这些情况？

简答

对于你的具体问题，你非常接近dataSrc: "accounts:account"。相反，它需要是dataSrc: "accounts.account"- 使用点而不是冒号。这是标准的 JavaScript 点分对象表示法，用于向下导航 JSON 结构的各个级别。

So:

ajax: {
  url: "./get_all_accounts.php",
  dataType: "JSON", // not actually needed - will be inferred.
  dataSrc: "accounts.account"
},

更长的答案

当 DataTables 通过 ajax 调用接收 JSON 对象时，它需要 JSON 包含一个数组。数组中的每一项都需要代表一行数据（或者至少是创建一行的原材料）。

DataTables 将自动为您处理对此数组的迭代 - 但它可能需要您的一些帮助才能知道在 JSON 中的何处找到此数组。

ajax 调用接收到的可能 JSON 结构的一些示例：

包含其他对象数组的对象：

{ "data": [ {...},{...},... ] }

包含数组数组的对象：

{ "data": [ [...],[...],... ] }

在这两种情况下，数组都有一个名称。在这种情况下，名称是data.

默认情况下，这就是 DataTables 所期望的：它假定数组的顶级名称为“data”，因此这是行迭代的起点。

如果数组的名称不是data，那么这就是需要使用ajax的地方dataSrc选项，告诉 DataTables 数组的实际名称是什么：

{ "myTableData": [ {...},{...},... ] }

$('#example').dataTable( {
  "ajax": {
    "url": "whatever",
    "dataSrc": "myTableData"
  }
} );

但是，如果 JSON 如下所示怎么办：

[ {...},{...},... ]

或者像这样：

[ [...],[...],... ]

在这些情况下，没有名字，所以dataSrc选项需要反映：

$('#example').dataTable( {
  "ajax": {
    "url": "whatever",
    "dataSrc": ""
  }
} );

对于您的情况，JSON 如下所示：

{
    "accounts": {
        "account": [{
            "accountid": "2066",
            "email": "Master (Blank) Defaults Acct",
            "fullname": "Test",
            "account_status": "Active",
            "create_date": "2\/19\/2010 2:58:12 PM",
            "last_login": "2\/19\/2010 3:03:43 PM",
            "subscription_level": "Gold",
            "license_type": "Test\/Free",
            "group_name": "Default Accounts"
        }, {
            "accountid": "2169",
            "email": "[email protected]"
        }]
    }
}

是的，它包含一个数组，但该数组位于accounts.account。这使用标准 JavaScript 点分对象表示法从 JSON 的入口点导航到数组的位置。因此dataSrc选项必须反映：

$('#example').dataTable( {
  "ajax": {
    "url": "whatever",
    "dataSrc": "accounts.account"
  }
} );

现在，您可以使用每个对象中的每个名称/值对columns.data选项 - 就像你在问题中所做的那样：

columns: [
  { data: "accountid", width: "5%" },
  { data: "email" , width: "25%" },
  { data: "fullname" },
  { data: "group_name" },
  { data: "subscription_level" },
  { data: "account_status" },
  { data: "license_type" },
  { data: "create_date" }
]

嵌套行数据

只是为了进一步继承“点对象表示法”的想法......

除了主数据数组可能嵌套之外，您还可以在每行数据内嵌套数据 - 例如：

{
  "name": "Tiger Nixon",
  "hr": {
    "position": "System Architect",
    "salary": "$3,120",
    "start_date": "2011/04/25"
  },
  "contact": [
    "Edinburgh",
    "5421"
  ]
}

在这种情况下，我们可以使用相同的点方法来访问嵌套列数据：

"columns": [
  { "data": "name" },
  { "data": "hr.position" },
  { "data": "contact.0" },
  { "data": "contact.1" },
  { "data": "hr.start_date" },
  { "data": "hr.salary" }
]

I stole官方文档中的最后一个示例。

看看Ajax 源数据页面以获取更多示例。