微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ASP.NET MVC 使用 Datatables (2)

ASP.NET MVC 使用 Datatables (2)

在服务器端实现分页,排序,获取当前页面数据

在上篇的基础上进行改造(datatables的客户端实现)

1、修改View页面代码如下:

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": {
                                 "first": "首页",
"prevIoUs": "上页",
"next": "下页",
"last": "末页"
"aria": {
paginate: {
                                     first: ‘首页‘,
prevIoUs: ‘上页‘,
next: ‘下页‘,
last: ‘末页‘
"sortAscending": ": 以升序排列此列",
"sortDescending": ": 以降序排列此列"
"decimal": "-",
"thousands": ","
}
});
}
};
assetListVM.init();
});
script >
}

2、添加服务端必须的组件:

  A:Install-Package datatables.mvc5

  B:Install-Package System.Linq.Dynamic  

3、添加服务器端方法

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、运行程序,查看结果

分享图片

  




版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐