我可以像下面这样静态地绑定DataTables.net:
<script type="text/javascript">
$(document).ready(function () {
$('#testDatatable').dataTable({
"aaData": [
["Ibrahim", 55],
["Asif", 20],
["Shariful", 70],
["John", 55],
["Doe", 40],
["Nazmul", 30],
["Jane", 15],
["Ershad", 10],
["Yusuf", 44],
["Bill", 22],
["Steve", 18]
]
,
"aoColumns": [
{ "sTitle": "Name" },
{ "sTitle": "Age" }
]
});
});
</script>
但是对于prop aaData,我想从web服务中获取数据。像下图:
<script type="text/javascript">
$(document).ready(function () {
$('#testDatatable').dataTable({
"aaData": $.getJSON('http://localhost:9183/Service.svc/GetCustomer')
,
"aoColumns": [
{ "sTitle": "Name" },
{ "sTitle": "Age" }
]
});
});
</script>
我的服务是这样的:
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json)]
public List<Customer> GetCustomer()
{
List<Customer> customers = new List<Customer>();
customers.Add(new Customer { Name = "Ibrahim", Age = 10 });
customers.Add(new Customer { Name = "John Doe", Age = 20});
return customers;
}
这不起作用。它显示没有发现任何记录。有人请告诉我我有什么选择,或者我在哪里错了。
你的webservice正在返回一个对象数组,默认情况下数据表期望一个数组的数组。您有两个选择,要么更新您的web服务,要么更改您的数据表配置,以使用mData
属性通过名称引用属性:
aoColumns": [
{ "sTitle": "Name", "mData": "Name" },
{ "sTitle": "Age", "mData": "Age" }
]
你可以在数据表参考页找到更多关于mData
的信息。只要搜索mdata
所以,我终于可以绑定Datatable与我的web服务调用。这是一个迂回的方法,但至少是绑定它,这是我的主要目标是解决。我从我的服务中获取数据,运行一个循环,将JSON格式化为Datatable接受的格式JS数组,并将"aaData"设置为格式化的JS数组:
$(document).ready(function () {
var returnData;
$.ajax({
url: "http://localhost:9183/Service.svc/GetCustomer",
async: false,
dataType: 'json',
success: function (data) {
returnData = data;
}
});
var arrayReturn = [], results = returnData;
for (var i = 0, len = results.length; i < len; i++) {
var result = results[i];
arrayReturn.push([ result.Age, result.Name]);
}
$('#testDatatable').dataTable({
"aaData": arrayReturn,
"aoColumns": [
{ "sTitle": "Name" },
{ "sTitle": "Age" }
]
});
});
我不需要改变服务中的任何东西。但我仍然不知道为什么我上面的第一次尝试不起作用,我有什么更好的选择。所以请随意推测这个。
我认为您可以将服务器端的列表转换为JSON并返回它。查看this和this的简单示例。
当然在SO上也有其他的例子