2015-05-07 6 views
6

Ich kann erfolgreich meine Datentabelle mit Ajax-Aufruf füllen, aber ich weiß nicht, wie JSON, das von Datatable mit diesem Ajax-Aufruf empfangen wird, analysiert wird.Wie parsen wir JSON, das vom Datatables-Ajax-Aufruf empfangen wurde?

Hier ist mein JavaScript-Code, der Ajax-Aufruf an den Server und meine Datentabelle füllt richtig:

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

Dies ist das JSON-Objekt vom Server zurückgegeben:

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

Wie können Sie Der Parameter data des zurückgegebenen JSON-Objekts wird von der Funktion "datatables" zum Füllen von Datentabellen verwendet. Jetzt möchte ich den Parameter balance analysieren, kann dies aber nicht. Wie kann ich das erreichen?

+0

ich im OP beschrieben haben, dass diese JSON vom Server zurückgegeben wird und gefugt ist zu den Datatabellen und ich möchte den Balance-Parameter dieses JSON zu einigen Javascript-Variablen zuweisen (dh es analysieren) – gdrt

Antwort

17

Etwas wie folgt aus:

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

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

+0

Vielen Dank, Leute, Ihre Antworten sind brilliant! – gdrt

5

nicht die URL-Funktion von Datatable Verwenden Sie, machen den Ajax selbst nennen

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

Seit Tables 1.10, können Sie Verwenden Sie die ajax.json() Funktion: https://datatables.net/reference/api/ajax.json() Ich habe es in den Beispielcode unten implementiert.

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

Hinweis für diese arbeiten Sie die Datentabelle mit $('#location-table').DataTable() und nicht $('#location-table').dataTable (die Differenz der aktivierte D ist) initialisiert werden muss