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

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

Answer 1

似乎你在ajax调用的成功中初始化了数据表，你需要做的是反过来设置它，即初始化数据表并设置正确的选项，插件将照顾好其余的事。

您已经拥有了返回json结果的控制器操作，因此您只需将sAjaxSource设置为该网址，因此在您的情况下："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。

jQuery DataTables Ajax数据源

1 个答案: