如何解析从 Datatables ajax 调用收到的 JSON?

Posted

技术标签:

【中文标题】如何解析从 Datatables ajax 调用收到的 JSON?【英文标题】:How to parse JSON received from Datatables ajax call? 【发布时间】:2015-07-18 00:14:02 【问题描述】:

我可以用 ajax 调用成功地填充我的数据表,但是我不知道如何解析数据表通过这个 ajax 调用接收到的 JSON。

这是我的 javascript 代码,它使 ajax 调用服务器并正确填充我的数据表:

$('#transactions').DataTable(
        "processing": true,
        "ajax": 
            "url": "/transactions
        ,
        "columns": [
             "data": "car",
             "data": "card_number",
             "data": "invoice",
             "data": "status"
        ]
    );

这是从服务器返回的 JSON 对象:


  "data": [
    
      "car": 190,
      "card_number": "6395637",
      "invoice": 200,
      "status": "success"
    ,
    
      "car": 191,
      "card_number": "9473650",
      "invoice": 180,
      "status": "success"
    
  ],
  "balance": 7300

如您所见,返回的JSON对象的data参数被datatables函数用来填充datatables,现在我想解析balance参数,但是我不能。我怎样才能做到这一点?

【问题讨论】:

我已经在 OP 中描述了这个 JSON 由服务器返回并填充到数据表中,我想将此 JSON 的 balance 参数分配给一些 javascript 变量(即解析它)跨度> 【参考方案1】:

类似这样的:

$('#transactions').dataTable(
    "ajax" : 
        "url" : "/transactions",
        "dataSrc" : function (json) 
            // manipulate your data (json)
            ...

            // return the data that DataTables is to use to draw the table
            return json.data;
        
    
);

文档:https://datatables.net/reference/option/ajax.dataSrc

【讨论】:

谢谢你们,你们的回答太棒了!【参考方案2】:

不要使用DataTable的url特性,让Ajax自己调用

$.getJSON('/transactions', function(response) 
  $('#transactions').dataTable(
    processing: true,
    data: response.data,
    columns: [
       data: "car",
       data: "card_number",
       data: "invoice",
       data: "status"
    ]
  );
  window.someGlobalOrWhatever = response.balance
);

【讨论】:

【参考方案3】:

从 DataTables 1.10 开始,您可以使用 ajax.json() 函数:https://datatables.net/reference/api/ajax.json() 我已经在下面的示例代码中实现了它。

$( document ).ready(function() 
  $('#search-form').submit(function(e) 
    e.preventDefault();
    var table = $('#location-table').DataTable(
      destroy: true,
      ajax: "/locations.json",
      columns: [
         "data": "code" ,
         "data": "status" ,
         "data": "name" ,
         "data": "region" ,
         "data": "address" ,
         "data": "city" ,
         "data": "state" ,
         "data": "zip" ,
         "data": "phone_number" ,
      ]
    )
  table.on( 'xhr', function () 
    var json = table.ajax.json();
    $('#totals').text(json.totals)
  );
  )
);

请注意,要使用此功能,您必须使用 $('#location-table').DataTable() 而不是 $('#location-table').dataTable 初始化数据表(区别在于大写的 D)

【讨论】:

以上是关于如何解析从 Datatables ajax 调用收到的 JSON?的主要内容,如果未能解决你的问题,请参考以下文章

如何避免 DataTables ajax 请求中的额外随机数

DataTables + PHP/AJAX - 在显示之前操作结果

jquery datatables 列渲染:多个 Ajax 调用

使用 AJAX 的 DataTables 中的子行

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

DataTables 隐藏数据源