jsonのデータをjavacriptとデータテーブルを使用して取得します。

Question

以下のようなjavascriptを使用しています.json形式でデータを取得できます。しかし、私は、すなわちDataTableの別の関数に渡すことができますどのようにのwindow.alert（returndata）で上記のコードでは、それ

<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> 

を移入するために、私は担保から返されたJSONデータを取得します。

しかし、私はそれが機能の準備ができてそれを使用すると同じ変数 "returndata"は空です。どのように私はそれを準備関数で得ることができます。

Answer 1

ここでは2つの非同期関数を呼び出しています。 $.getJSON()および$(document).ready()。 ready()がgetJSON()より速いと表示されます。つまり、データテーブルを塗りようとするとreturndataが空です。

あなたは常に正しい順序を持っていることを確認するために、これを試してみてください：

<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

まず、どのjQueryプラグインでDataTablesを使用していますか？これはoneですか？私が最初にやることは、ドキュメントが示すようにすべてを$document.ready()の中に入れることです。これにより、DOMの準備が整った後にすべてのコードが確実に実行されます。それ以降に何が起こるか教えてください。

this DataTables APIを使用している場合は、ドキュメントの一部が役立つ可能性があります。

それぞれからの結果は、セレクタによって検出されたテーブルを持つDataTables APIオブジェクトのインスタンスになりますその文脈で$(selector).DataTable()と$(selector).dataTable()の違いに注意することが重要です。前者はDataTables APIインスタンスを返し、後者はjQueryオブジェクトを返します。

Answer 3

私は、これは良い解決策、単なるハックではありません知っています。 window.setInterval関数またはwindow.setTimeout関数を使用して、データをチェックし、必要な関数を実行することができます。間隔をクリアすることを忘れないでください。

Answer 4

DataTableのドキュメントに従って：あなたはこのような何かを行う必要があるでしょうhttps://datatables.net/examples/server_side/simple.html

を：

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

私はこのコードをテストしていませんが、これは正しい方向にあなたを導く必要があります:)