我一直在查看 dataTables 文档,我认为问题出在您的 JSON 上。
服务器端手册
这是他们给出的例子。count: 不是数据表所期望的列出的参数之一。让我知道是否将 JSON 更改为返回“draw”。“recordsTotal”、“recordsFiltered”和“data”作为参数起作用。因为我自己还在学习 DataTables。
{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
[
"Angelica",
"Ramos",
"System Architect",
"London",
"9th Oct 09",
"$2,875"
],
[
"Ashton",
"Cox",
"Technical Author",
"San Francisco",
"12th Jan 09",
"$4,800"
],
...
]
}
我终于让所有这些工作了!
你将需要这个类来播放 ajax/json 的 api
Imports System.Web.Script.Serialization
Public Class DataTableJsonModel
Public Property draw As Integer
Public Property start As Integer
Public Property length As Integer
Public Property search As SearchModel
Public Property order As OrderModel()
Public Property columns As ColumnModel()
Class ColumnModel
Public Property Data As String
Public Property Name As String
Public Property searchable As Boolean
Public Property Orderable As Boolean
Public Property Search As SearchModel
End Class
Class SearchModel
Public Property value As String
Public Property regex As Boolean
End Class
Class OrderModel
Public Const asc As String = "asc"
Public Const desc As String = "desc"
Public Property column As Integer
Public Property dir As String
End Class
End Class
Public Class DataTableReturnModel
Public Property draw As Integer
Public Property data As Object
Public Property recordsTotal As Integer
Public Property recordsFiltered As Integer
Public Property errorMessage As String
End Class
Public Class AWS
Public Property instance_type As String
Public Property id As String
Public Property architecture As String
Public Property account As String
Public Property name As String
Public Property block_devices As BlockDeviceModel()
Public Property ebs_optimized As Boolean
Public Property group_name As String
Public Property hypervisor As String
Class BlockDeviceModel
Public Property delete_on_terminate As Boolean
Public Property name As String
Public Property status As String
Public Property volume_id As String
End Class
End Class
我的 Html/javascript 看起来像这样。
@Code
ViewData("Title") = "AWSDataTables"
End Code
<script>
$(document).ready(function () {
var table = $('#ec2_table').DataTable({
"serverSide": true,
"ajax": { url: '/Home/ec2',
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: function (d) {
return JSON.stringify(d);
},
},
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "architecture" },
{ "data": "instance_type" },
],
"lengthMenu": [[10, 25, 50, 100, 1000], [10, 25, 50, 100, 1000]],
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "/Scripts/media/js/DataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
}
});
});
</script>
<h2>AWSDataTables</h2>
<table id="ec2_table" class="order-column display compact" cellspacing="0" width="98%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Architecture</th>
<th>InstType</th>
</tr>
</thead>
</table>
我的服务器端控制器代码是这样的。
Function AWSDataTables() As ActionResult
Return View()
End Function
<HttpPost()> _
Function ec2(d As DataTableJsonModel) As JsonResult
Dim dataresults As IEnumerable(Of AWS) = GetAWSTestList()
Dim filteredData As IEnumerable(Of AWS) = dataresults
Dim output As New DataTableReturnModel()
'sorting happens here
If Not String.IsNullOrEmpty(d.Search.value) Then
Dim s As String = d.search.value.ToLower
'this will obviously change based on your class.
filteredData = dataresults.Where(Function(x) x.id.ToLower.Contains(s) OrElse
x.architecture.ToLower.Contains(s) OrElse
x.name.ToLower.Contains(s))
End If
'Ordering happens here
If Not IsNothing(d.order) AndAlso d.order.Length > 0 Then
Dim orderM As DataTableJsonModel.OrderModel = d.order(0)
If Not IsNothing(orderM) Then
Dim sortDirection As String = orderM.dir
Dim columnM As DataTableJsonModel.ColumnModel = d.columns.ElementAtOrDefault(orderM.column)
If Not IsNothing(columnM) AndAlso Not String.IsNullOrEmpty(columnM.Data) AndAlso Not IsNothing(GetType(AWS).GetProperty(columnM.Data)) Then
If sortDirection = DataTableJsonModel.OrderModel.asc Then
filteredData = filteredData.OrderBy(Function(x) GetType(AWS).GetProperty(columnM.Data).GetMethod.Invoke(x, {}))
Else
filteredData = filteredData.OrderByDescending(Function(x) GetType(AWS).GetProperty(columnM.Data).GetMethod.Invoke(x, {}))
End If
End If
End If
End If
output.data = filteredData.Skip(d.start).Take(d.length)
output.recordsFiltered = filteredData.Count
output.recordsTotal = dataresults.Count
Return Json(output)
End Function