javascript - jQuery DataTables Ajax 数据源

Question

当使用AJAX作为数据源限制时，我找到了DataTables的文档。我在 ASP.NET MVC 4 应用程序的 Controller 中有一个方法，它返回一个简单的 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" },
            ]
        });
    }
});

理想情况下，在成功回调触发之前我不会创建表元素，但在本例中，页面上有一个空表元素。使用以下代码，我收到错误: Uncaught TypeError: Object [object Object] has no method 'dataTable' 问题是，我已经在页面上有了一个不同的数据表，并且它工作正常。该脚本位于页面的最底部，工作数据表之后。为什么我会收到此错误？有什么简单方法可以让 DataTables 与 AJAX 数据源良好配合？

Answer 1

似乎您将数据表的初始化放在ajax调用的成功中，您需要做的是以相反的方式设置它，即初始化数据表并设置正确的选项，插件将照顾好剩下的事情。

您已经拥有返回 json 结果的 Controller 操作，因此您只需将 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 发送到 View 中的数据表。

更多信息here和 here .