ASP.NET MVC 使用 Datatables (2)
在上篇的基础上进行改造(datatables的客户端实现)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<
div
class="row">
class="col-md-12">
class="panel panel-primary" id="list-panel">
class="panel-heading">
h1
class="panel-title">Assets</
h1
>
</
div
>
class="panel-body">
table
id="assets-data-table" class="table table-striped table-bordered" style="width:100%">
table
>
>
>
>
>
@section Scripts
{
script
type="text/javascript">
var assetListVM;
$(document).ready(function () {
assetListVM = {
dt:null,
init: function () {
dt = $("#assets-data-table").DataTable({
"serverSide": true,
"proccessing": true,
"ajax": {
"url":"@Url.Action("Get","Asset")"
},
"columns": [
{ "title": "Bar Code","data": "Barcode","searchable": true },
{ "title": "Manufacturer","data": "Manufacturer",
{ "title": "Model","data": "ModelNumber",
{ "title": "Building","data": "Building",
{ "title": "Room No","data": "RoomNo" },
{ "title": "Quantity","data": "Quantity" }
],
"lengthMenu": [[10,25,50,100],[10,100]],
"language": {
"processing": "处理中...",
"lengthMenu": "显示 _MENU_ 项结果",
"zeroRecords": "没有匹配结果",
"info": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"infoEmpty": "显示第 0 至 0 项结果,共 0 项",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"search": "搜索:",
"searchPlaceholder": "搜索...",
"url": "",
"emptyTable": "表中数据为空",
"loadingRecords": "载入中...",
"infoThousands": ",",
"paginate": {
"prevIoUs": "上页",
"next": "下页",
"last": "末页"
"aria": {
paginate: {
prevIoUs: ‘上页‘,
next: ‘下页‘,
last: ‘末页‘
"sortAscending": ": 以升序排列此列",
"sortDescending": ": 以降序排列此列"
"decimal": "-",
"thousands": ","
}
});
}
};
assetListVM.init();
});
script
>
}
|
2、添加服务端必须的组件:
A:Install-Package datatables.mvc5
B:Install-Package System.Linq.Dynamic
48 |
public
ActionResult Get([ModelBinder(
typeof
(DataTablesBinder))] IDataTablesRequest requestModel)
{
IQueryable<Asset> query = dbContext.Assets;
var
totalcount = query.Count();
#region Filtering
if
(requestModel.Search.Value!=
string
.Empty)
{
value = requestModel.Search.Value.Trim();
query = query.Where(p => p.Barcode.Contains(value) ||
p.Manufacturer.Contains(value) ||
p.ModelNumber.Contains(value) ||
p.Building.Contains(value)
);
}
filteredCount = query.Count();
#endregion
#region Sorting
sortedColumns = requestModel.Columns.GetSortedColumns();
orderByString =
.Empty;
foreach
(
column
in
sortedColumns)
{
orderByString += orderByString !=
.Empty ?
","
:
""
;
orderByString += (column.Data) + (column.sortDirection == Column.OrderDirection.Ascendant?
" asc"
:
" desc"
);
}
query = query.OrderBy(orderByString ==
" Barcode asc"
: orderByString);
#endregion
//Paging
query = query.Skip(requestModel.Start).Take(requestModel.Length);
data = query.Select(asset=>
new
{
AssetID=asset.AssetID,
Barcode=asset.Barcode,238);">Manufacturer=asset.Manufacturer,238);">ModelNumber=asset.ModelNumber,238);">Building=asset.Building,238);">RoomNo=asset.RoomNo,238);">Quantity=asset.Quantity
}).ToList();
return
Json(
new
DataTablesResponse(requestModel.Draw,data,filteredCount,totalcount),JsonRequestBehavior.AllowGet);
}
|
4、运行程序,查看结果