jQuery DataTables Ajax数据源

Question

当使用AJAX作为数据源受限时，我找到了DataTables的文档。 我在ASP.NET MVC 4应用程序的控制器中有一个返回简单JSON结果的方法，并且我正在尝试用以下数据填充DataTable：

$.ajax({
    type: "GET",
    dataType: "json",
    contentType: "application/json",
    url: "/Chart/Ajax",
    success: function (data) {
        var returnData = [];
        for (var i = 0; i < data.length; i++) {
            //makes the data an array of arrays
            returnData.push($.makeArray(data[i]));
        }
        $('#secondary').dataTable({
            "aaData": returnData,
            "aoColumns": [
                { "sTitle": "DrugClass" },
                { "sTitle": "DrugClassSize" },
                { "sTitle": "DistinctPatients" },
            ]
        });
    }
});

理想情况下，在触发成功回调之前，我不会创建table元素，但是在这种情况下，页面上会出现一个空的table元素。 通过以下代码，我得到了错误： Uncaught TypeError: Object [object Object] has no method 'dataTable' ，事实是，页面上已经有一个不同的DataTable，并且工作正常。 该脚本在页面的最底部，在工作数据表之后。 为什么我会收到此错误？有什么简单的方法可以使DataTables与AJAX数据源完美配合？

Answer 1

似乎您正在将数据表的初始化放在ajax调用成功的过程中，而您需要做的是反过来设置它，即初始化数据表并设置正确的选项，然后插件将负责其余的部分。

您已经具有返回json结果的控制器操作，因此只需将sAjaxSource设置为该url，因此在您的情况下： "sAjaxSource": "/Chart/Ajax" 。

然后，执行ajax调用成功时要执行的操作，并将该函数设置为fnServerData选项，如下所示：

$('#secondary').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "/Chart/Ajax",
    "fnServerData": function ( sSource, aoData, fnCallback ) {

        var returnData = [];
        for (var i = 0; i < aoData.length; i++) {
        //makes the data an array of arrays
        returnData.push($.makeArray(aoData[i]));
       }

        $.getJSON( sSource, returnData , function (json) { 
            /* Do whatever additional processing you want on the callback, then 
           tell DataTables */
            fnCallback(json)
        } );
    }
} );

然后，fnCallback将json发送到视图中的数据表。

这里和这里有更多信息。