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

Posted 2023-05-07

【中文标题】将 Ajax 与 jQuery DataTables 一起使用时，如何确定如何处理返回的数据？

【英文标题】：When using Ajax with jQuery DataTables, how do I determine what to do with the data returned?

【发布时间】：2021-03-04 18:39:13

【问题描述】：

像许多其他人一样，我查看类似问题的各种答案，在网上搜索示例等，但除非我碰巧找到我正在经历的几乎相同的案例，否则我无法弄清楚如何拥有 DataTable由 Ajax 调用填充。我认为如果有人可以解释发生的步骤以及如何使用 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":"[e-mail]"......]

现在，在网页中，我有：

$(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 ...

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

【参考方案1】：

简答

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

所以：

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 以外的名称，那么您需要使用 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": "[e-mail]"
        ]
    

是的，它包含一个数组，但该数组位于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" 
]

我stole这是官方文档中的最后一个示例。

查看Ajax Source Data 页面了解更多示例。

【讨论】：

谢谢！这正是我所希望的答案。清晰确实有帮助。

查看示例：datatables.net/reference/option/ajax。我实现了这一点，但它不起作用。由于我有一个类似的数据集，我无法开始工作并正在尝试它。自示例发布以来发生了什么变化吗？

你指的是哪个例子？该页面上有一些。你可以创建一个fiddle 来显示你的代码吗？小提琴还必须包含一个数据样本。 （我没有在文档中找到任何过时的示例 - 它通常看起来维护得很好。）

这里（希望）是一个 jsFiddle 示例的链接，从示例中复制而来。一定有什么错误，但我看不到。 jsfiddle.net/Wooten/y4kdtm87/33/#&togetherjs=ODygPdLPvm

小提琴示例混合了两种不同的方法：ajax 来源数据与 JavaScript 来源数据。通过在 JS 变量 var dataSet = [...] 中声明您的数据，这意味着您不能使用 ajax: ... 访问该数据（没有可供 ajax 访问的 URL）。相反，data: dataSet 行是单独使用的。您可以通过访问this page 并点击相关的“数据源”链接查看这两种方法（ajax 与 JS）。希望有帮助！