Làm thế nào để phân tích cú pháp JSON nhận được từ cuộc gọi ajax Datatables?

Question

Tôi có thể điền thành công dữ liệu của mình với cuộc gọi ajax, nhưng sau đó tôi không biết cách phân tích cú pháp JSON được nhận bởi datatable với cuộc gọi ajax này.

Đây là mã Javascript của tôi, mà làm cho cuộc gọi ajax đến máy chủ và điền vào DataTable của tôi một cách chính xác:

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

Đây là đối tượng JSON trở về từ máy chủ:

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

Như bạn có thể xem, tham số data của đối tượng JSON được trả về được sử dụng bởi hàm datatables để điền vào bởi datatables, và bây giờ tôi muốn phân tích tham số balance, nhưng tôi không thể. Làm thế nào tôi có thể đạt được điều này?

Answer 1

Something như thế này:

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

Documents: https://datatables.net/reference/option/ajax.dataSrc

Answer 2

Không sử dụng các tính năng url của DataTable, làm cho Ajax gọi mình

$.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 
}); 

Answer 3

Kể từ DataTables 1.10, bạn có thể sử dụng hàm ajax.json(): https://datatables.net/reference/api/ajax.json() Tôi đã triển khai nó trong mã ví dụ bên dưới.

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

Chú ý để làm việc này, bạn phải khởi tạo DataTable với $('#location-table').DataTable() và không $('#location-table').dataTable (sự khác biệt là vốn D)