web-dev-qa-db-ja.com

Datatablesのajax呼び出しから受信したJSONを解析する方法は？

Ajax呼び出しでデータテーブルを正常に埋めることはできますが、このajax呼び出しでデータテーブルが受け取ったJSONを解析する方法がわかりません。

サーバーにajax呼び出しを行い、データテーブルに正しく入力するJavaScriptコードは次のとおりです。

$('#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関数がデータテーブルを入力するために使用されていますが、balanceパラメータを解析したいのですが、できません。どうすればこれを達成できますか？

javascriptjqueryajaxjsondatatables
9
gdrt

このようなもの：

$('#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

25
dekkard

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
});
6
Juan Mendes

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です）

1
Hula_Zell