使用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 
        })
    }
}

我尚未测试此代码，但这应该可以指导您正确的方向:)