javascript jQuery DataTables Ajax 数据源
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22306184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery DataTables Ajax Data Source
提问by wootscootinboogie
I find the documentation for DataTables when using AJAX as the data source limited. I've got a method in my controller in an ASP.NET MVC 4 application that returns a simple JSON result, and I'm trying to fill a DataTable with the following:
当使用 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" },
]
});
}
});
Ideally, I wouldn't create the table element until the success callback had fired, but in this instance an empty table element is on the page. With the following code I get the error: Uncaught TypeError: Object [object Object] has no method 'dataTable'the thing is, I already have a different DataTable already on the page and it works fine. This script is at the very bottom of the page, after the working data table. Why am I getting this error and what's an easy way to get DataTables to play nice with AJAX data sources?
理想情况下，我不会在成功回调触发之前创建 table 元素，但在这种情况下，页面上有一个空的 table 元素。使用以下代码我得到错误：Uncaught TypeError: Object [object Object] has no method 'dataTable'问题是，我已经在页面上有一个不同的 DataTable 并且它工作正常。该脚本位于页面的最底部，在工作数据表之后。为什么我会收到此错误，有什么简单的方法可以让 DataTables 与 AJAX 数据源配合使用？
回答by Declan McNulty
It seems as though you are putting the initialisation of the datatable in the success of the ajax call, and what you need to do is set it up the other way round i.e initialise the datatable and set the correct options and the plugin will take care of the rest.
似乎您将数据表的初始化置于 ajax 调用的成功中，而您需要做的是反过来设置它，即初始化数据表并设置正确的选项，插件将负责其余的部分。
You already have your controller action that returns a json result, so you simply need to set the sAjaxSourceto that url, so in your case: "sAjaxSource": "/Chart/Ajax".
你已经有你的控制器动作返回一个JSON结果，所以你只需要设置sAjaxSource你的情况该URL，那么： "sAjaxSource": "/Chart/Ajax"。
You then do what you were going to do in the success of the ajax call and set that function to be the fnServerDataoption, as shown below:
然后，您在 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)
} );
}
} );
The fnCallback will then send the json to the datatable in the view.
然后 fnCallback 会将 json 发送到视图中的数据表。
