使用javascript和datatables在json中獲取數據

Question

我有一個如下所示的javascript，它可以從支持json格式的數據中獲取數據。 但是我如何將其傳遞給另一個函數，即數據表來填充它

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

在window.alert（returndata）中的上述代碼中，我得到了從支持返回的json數據。

但是當我在函數准備中使用它時，相同的變量“ returndata”為空。 我如何在就緒功能中獲取它。

Answer 1

您在這里調用兩個異步函數。 $.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？ 它是這一個 ？ 我要做的第一件事是將所有內容放入$document.ready()如文檔所示。 這樣可以確保在DOM准備好后所有代碼都可以執行。 讓我知道那之后會發生什么。

此外，如果您正在使用DataTables API，則本部分文檔也可能會有所幫助。 它可能像拼寫錯誤一樣簡單，具體取決於您要執行的操作，如此處的文檔所述：

每個對象的結果都是DataTables API對象的實例，該對象具有選擇器在其上下文中找到的表。 重要的是要注意$( selector ).DataTable()和$( selector ).dataTable()之間的區別。 前者返回DataTables API實例，而后者返回jQuery對象。

Answer 3

我知道這不是一個好的解決方案，只是一個hack。 您可以使用window.setInterval或window.setTimeout函數來檢查數據並執行所需的函數。 不要忘記清除間隔。

Answer 4

請遵循Datatables文檔： 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 
        })
    }
}

我尚未測試此代碼，但這應該可以指導您正確的方向:)