Holen Sie sich Daten in JSON mit Javascript und Tabellen

Question

Ich habe ein Javascript wie unten, die Daten aus gesichert im JSON-Format abrufen können. Aber wie kann ich es an eine andere Funktion übergeben, das heißt Datentabellen um es zu füllen

<script> 
var returndata; 

$.getJSON("/api/dashboard_data/", success); 

function success(data) { 
    returndata = data; 
    window.alert(returndata); 
    return returndata; 
    // do something with data, which is an object 
} 

$(document).ready(function() { 
     $('#example').DataTable({ 
     data: returndata, 
     columns: [ 
      { title: "Action" }, 
      { title: "Input" }, 
      { title: "State" }, 
      { title: "Completed" }, 
      { title: "Project" }, 
     ] 
    }); 
}); 
</script> 

In obigen Code in window.alert (returndata), erhalte ich die JSON-Daten, die von gesicherten zurückgegeben wurde.

Aber die gleiche Variable "returndata", wenn ich es in Funktion verwende, ist es leer. Wie kann ich es fertig machen?

Answer 1

Sie rufen hier zwei asynchrone Funktionen auf. $.getJSON() und $(document).ready(). Es sieht so aus, dass ready() schneller als getJSON() ist, was bedeutet, dass returndata leer ist, wenn Sie versuchen, Ihre Datentabelle zu füllen.

dieses Versuchen Sie immer die richtige Reihenfolge stellen Sie sicher haben:

<script> 

$(document).ready(function() { 
     $.getJSON("/api/dashboard_data/", function(returndata) { 
      $('#example').DataTable({ 
       data: returndata, 
       columns: [ 
        { title: "Action" }, 
        { title: "Input" }, 
        { title: "State" }, 
        { title: "Completed" }, 
        { title: "Project" }, 
       ] 
      }); 
     }); 
}); 
</script> 

Answer 2

Erstens, welches jQuery-Plugin verwenden Sie für DataTables? Ist es das one? Das erste, was ich tun würde, wäre, alles in die $document.ready() zu stecken, wie die Dokumentation zeigt. Dadurch wird sichergestellt, dass der gesamte Code ausgeführt wird, nachdem das DOM bereit ist. Lass mich wissen, was danach passiert.

Auch this Teil der Dokumentation könnte helfen, wenn Sie die DataTables-API verwenden. Es könnte so einfach als falsch geschrieben sein, je nachdem, was Sie versuchten, wie aus dem docs hier zitiert zu tun:

Das Ergebnis von jeweils eine Instanz des Datatables API-Objekts, das die Tabellen durch den Selektor gefunden hat in seinem Kontext. Es ist wichtig, den Unterschied zwischen $(selector).DataTable() und $(selector).dataTable() zu beachten. Die erste gibt eine DataTables-API-Instanz zurück, während die zweite ein jQuery-Objekt zurückgibt.

Answer 3

Ich weiß, dass dies keine gute Lösung ist, nur ein Hack. Sie können die Funktion window.setInterval oder window.setTimeout verwenden, um nach Daten zu suchen und die erforderliche Funktion auszuführen. Vergessen Sie nicht, das Intervall zu löschen.

Answer 4

Folgen Sie der Datentabellen Dokumentation: https://datatables.net/examples/server_side/simple.html

Sie werden so etwas zu tun haben:

$('#example').DataTable({ 
    "processing": true, 
    "serverSide": true, 
    "ajax": _getData(), 
    "columns": [ 
     {title: "Action"}, 
     {title: "Input"}, 
     {title: "State"}, 
     {title: "Completed"}, 
     {title: "Project"} 
    ] 
}); 

function _getData(data, callback) { 
    $.getJSON("/api/dashboard_data/", success); 
    function success(data) { 
    // you'll probably want to get recordsTotal & recordsFiltered from your server 
     callback({ 
      recordsTotal: 57, 
      recordsFiltered: 57, 
      data: data 
     }) 
    } 
} 

ich diesen Code nicht getestet haben, aber das sollten Sie in die richtige Richtung :)