将 Ajax 与 jQuery DataTables 一起使用时，如何确定如何处理返回的数据? [英] When using Ajax with jQuery DataTables, how do I determine what to do with the data returned?

问题描述

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

例如:

json 从 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:43PM","subscription_level":"Gold","license_type":"Test/Free","group_name":"Default Accounts"},{"accountid":"2169",";email":"[e-mail]"......}]}}

现在，在网页中，我有:

$(document).ready(function() {oTable = $('#users').DataTable({处理:真实，bStateSave: 真,阿贾克斯:{网址:./get_all_accounts.php"，数据类型:JSON"，数据源:"},列: [{ 数据:accountid"，宽度:5%"；},{ 数据:电子邮件"，宽度:25%"},{ 数据:全名"},{ 数据:group_name"},{ 数据:订阅级别"；},{ 数据:帐户状态"；},{ 数据:license_type"},{ 数据:创建日期"}]});

我为 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 结构的各个级别中向下导航.

所以:

ajax: {网址:./get_all_accounts.php"，dataType: "JSON",//实际上不需要 - 将被推断.数据源:accounts.account"；},

更长的答案

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

DataTables 会自动为你处理这个数组的迭代——但它可能需要你的一些帮助才能知道在你的 JSON 中的哪里可以找到这个数组.

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

一个包含其他对象数组的对象:

{ 数据":[ {...},{...},... ] }

一个包含数组数组的对象:

{ 数据":[ [...],[...],... ] }

在这两种情况下，数组都有一个名称.在本例中，名称为 data.

默认情况下，这是 DataTables 所期望的:它假定顶级名称为data"；对于数组，因此它是行迭代的起点.

如果数组被命名为 data 以外的名称，那么这就是您需要使用 ajax 的地方 dataSrc 选项，告诉 DataTables 数组的实际名称是什么:

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

$('#example').dataTable( {阿贾克斯":{网址":随便"，dataSrc":myTableData"}});

但是，如果 JSON 看起来像这样:

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

或者像这样:

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

在这些情况下，没有名称，因此 dataSrc 选项需要反映:

$('#example').dataTable( {阿贾克斯":{网址":随便"，数据源":"}});

在您的情况下，JSON 如下:

<代码>{帐户":{帐户":[{帐号":2066"，电子邮件":主(空白)默认帐户"，全名":测试"，account_status":活动"，create_date":2/19/2010 2:58:12 PM"，last_login":2/19/2010 3:03:43 PM"，subscription_level":黄金"，license_type":测试/免费"，group_name":默认帐户"}, {帐号":2169"，电子邮件":[e-mail]"}]}}

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

$('#example').dataTable( {阿贾克斯":{网址":随便"，dataSrc":accounts.account"}});

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

列:[{ 数据:accountid"，宽度:5%"；},{ 数据:电子邮件"，宽度:25%"},{ 数据:全名"},{ 数据:group_name"},{ 数据:订阅级别"；},{ 数据:帐户状态"；},{ 数据:license_type"},{ 数据:创建日期"}]

嵌套行数据

只是为了进行点状对象符号"；进一步的想法...

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

{名称":老虎尼克松"，小时":{职位":系统架构师"，薪水":$3,120"，开始日期":2011/04/25"},联系方式":[爱丁堡"，5421"]}

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

列":[{数据":名称"；},{数据":hr.position"；},{数据":contact.0"；},{数据":contact.1"；},{数据":hr.start_date"；},{数据":hr.salary"；}]

我窃取了官方文档中的最后一个示例.

查看Ajax 源数据页面，了解更多示例.

Like many others, I look at various answers to similar questions, search the web for examples etc., but unless I happen to find an almost identical case that I am experiencing, I can't figure out how to have the DataTable populated by the Ajax call. I think it would be helpful if someone could explain the steps that happen and how to use the various parameters of the Ajax call for DataTables to get the data in the proper form depending on how it is returned.

For instance:

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]"......}]}}

Now, in the web page, I have:

$(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" }
    ]
    });

I've tried various things for dataSrc, like "accounts", "accountid", "accounts:account". I can't change the incoming data. It's valid json, I believe. How do I describe what the form of the data being returned is? I do the same thing for another data source which returns:

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

... dataSrc: "data" }, columns: [ { data: "id", width: "5%" }, { data: "email" , width: "25%" }, ...

handles it perfectly. The only difference I can see is in this case we have {data:[{ row data },{row data}]), while in the problem one, there is one more level of structure, viz.

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

How does one, in general, handle these cases?

解决方案

Short Answer

For your specific question, you were very close with dataSrc: "accounts:account". Instead, it needs to be dataSrc: "accounts.account" - using a dot instead of a colon. This is standard JavaScript dotted object notation for navigating down through the levels of a JSON structure.

So:

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

Longer Answer

When DataTables receives a JSON object via an ajax call, it needs the JSON to contain an array. Each item in the array needs to represent a row of data (or, at least, the raw materials for creating a row).

DataTables will handle iterating over this array for you automatically - but it may need some help from you to know where to find this array inside your JSON.

Some examples of possible JSON structures received by your ajax call:

An object containing an array of other objects:

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

An object containing an array of arrays:

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

In both these cases, the array has a name. In this case, the name is data.

By default, this is what DataTables expects: It assumes a top-level name of "data" for the array, which is therefore the starting point for row iteration.

If the array is named something other than data, then this is where you need to use the ajax dataSrc option, to tell DataTables what the array's name actually is:

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

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

However, what if the JSON looks like this:

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

or like this:

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

In these cases, there is no name, so the dataSrc options needs to reflect that:

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

In your case, the JSON is as follows:

{
    "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]"
        }]
    }
}

Yes, it contains an array, but the array is located at accounts.account. This uses standard JavaScript dotted object notation to navigate from the entry point of your JSON to the location of the array. Therefore the dataSrc option has to reflect that:

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

Now, you can refer to each name/value pair in each object, using the columns.data option - like you do in the question:

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" }
]

Nested Row Data

Just to carry on the "dotted object notation" idea further...

As well as there being a possible nesting of the main data array, you can also have nesting of data inside each row of data - for example:

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

In this case, we can use the same dot approach to access nested column data:

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

I stole this last example from the official documentation.

Take a look at the Ajax Source Data page for some more examples.

这篇关于将 Ajax 与 jQuery DataTables 一起使用时，如何确定如何处理返回的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！