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

问题描述

我和其他许多人一样，查看各种类似问题的答案，在网上搜索示例等，但是除非碰巧发现我遇到的几乎相同的情况，否则我不知道该如何使用DataTable由Ajax调用填充.我认为，如果有人可以解释发生的步骤以及如何使用Ajax调用DataTables的各种参数来根据返回的数据以正确的形式获取数据，将会很有帮助.

例如:

从get_all_accounts.php返回的

  json{帐户":{帐户":[{帐户ID":"2066"，电子邮件":主(空白)默认帐户"，全名":测试"，"; account_status":有效"，"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({处理:是的，bStateSave:是的，ajax:{网址:"./get_all_accounts.php"，dataType:"JSON"，dataSrc:"}，列: [{data:"accountid"，宽度:"5％"；}，{data:"email";，宽度:"25％"；}，{数据:全名"；}，{data:"group_name";}，{数据:"subscription_level"；}，{data:"account_status";}，{data:"license_type";}，{数据:"create_date"}]}); 

我已经为dataSrc尝试了各种方法，例如"accounts"，"accountid"，"accounts:account".我无法更改传入的数据.我相信这是有效的json.我如何描述要返回的数据的形式?我对返回以下数据的另一个数据源执行相同的操作:

{数据":[{"0":"55"，"id":"55"，"1":"2020-01 ..."和javascript:

...dataSrc:数据"；}，列: [{数据:"id"，宽度:"5％"}，{data:"email";，宽度:"25％"；}，...

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

  {帐户:{帐户:[{行数据}，{行数据} ... 

通常情况下，如何处理?

解决方案

简短回答

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

所以:

  ajax:{网址:"./get_all_accounts.php"，dataType:"JSON"，//实际不需要-将会被推断出来.dataSrc:"accounts.account"；}， 

更长的答案

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

DataTables会自动为您处理对该数组的迭代-但可能需要您的一些帮助才能知道在JSON中可以找到该数组的位置.

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

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

  {" data" ;: [{...}，{...}，...]} 

包含数组数组的对象:

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

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

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

如果该数组被命名为 data 以外的其他名称，则需要在此处使用ajax

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

  [{...}，{...}，...] 

或这样:

  [[...]，[...]，...] 

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

  $('#example').dataTable({"ajax":{" url":任何"，"dataSrc":"}})； 

在您的情况下，JSON如下:

  {帐户":{帐户":[{"accountid":"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":"Test \/Free"，"group_name":默认帐户"}，{"accountid":"2169"，电子邮件":"[e-mail]"}]}} 

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

  $('#example').dataTable({"ajax":{" url":任何"，"dataSrc":"accounts.account"；}})； 

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

 列:[{data:"accountid"，宽度:"5％"；}，{data:"email";，宽度:"25％"；}，{数据:全名"；}，{data:"group_name";}，{数据:"subscription_level"；}，{data:"account_status";}，{data:"license_type";}，{数据:"create_date"}] 

嵌套行数据

只需进行点对象符号"操作即可.进一步的想法...

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

 <代码> {名称":尼克松"，"hr":{"position":"System Architect"，"salary":"$ 3,120"，" start_date" ;:" 2011/04/25"}，联系":[爱丁堡"，"5421"]} 

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

 <代码>列":[{数据":名称"；}，{"data":"hr.position"}，{数据":"contact.0&"；}，{数据":"contact.1"；}，{数据":"hr.start_date"}，{"data":"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屋！