jQuery DataTables Ajax 数据源答案

【问题标题】：jQuery DataTables Ajax Data SourcejQuery DataTables Ajax 数据源
【发布时间】：2014-03-10 16:45:06
【问题描述】：

当使用 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" },
            ]
        });
    }
});

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

【问题讨论】：

标签： javascript jquery ajax jquery-datatables

【解决方案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 发送到视图中的数据表。

更多信息here 和here。

【讨论】：