如何解析从 Datatables ajax 调用收到的 JSON？答案

【问题标题】：How to parse JSON received from Datatables ajax call?如何解析从 Datatables ajax 调用收到的 JSON？
【发布时间】：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 变量（即解析它）跨度>

标签： javascript jquery ajax json datatables

【解决方案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）

【讨论】：