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發送到視圖中的數據表。

這里和這里有更多信息。