Jquery.Datatables 服务器处理(Server-side processing)

看了看介绍

http://datatables.club/manual/server-side.html

没有经过处理的分页,先显示出来看看效果,就这样写(存储过程自己写)

cshtml

"serverSide": true,//服务器处理:过滤、分页、排序
"processing": true,//是否显示处理状态(排序的时候,数据很多耗费时间长的话,也会显示这个)

controller.cs

//jquery.datatables
public JsonResult GetUserInfoList()
{
try
{
int pageSize = int.Parse(Request.Params["length"]);
int start = int.Parse(Request.Params["start"]);
int pageIndex = start / pageSize + ; JsonResponse list = UserInfoService.Service.GetDataTablesUserInfoList(pageIndex, pageSize);
return this.Json(list);
}
catch (Exception ex)
{
return this.Json(UnifyResponse.ThrowError(ex));
}
}

bll

public JsonResponse GetDataTablesUserInfoList(int pageIndex, int pageSize)
{
try
{
proc_DataPagination p_page = new proc_DataPagination();
p_page.Table = "UserInfo";
p_page.Fields = "*";
p_page.CurrentPage = pageIndex;
p_page.PageSize = pageSize;
p_page.OrderBy = "ID desc";
p_page.Where = string.Format("1=1");
//p_page.Where = string.Format("openid like '%{0}%'",);
IList<UserInfo> list = DDataBase.WebDB.StoredProcedureToIList<proc_DataPagination, UserInfo>(p_page); JsonResponse mypage = new JsonResponse();
mypage.data = list;
mypage.recordsTotal = p_page.Count;
mypage.recordsFiltered = p_page.Count; return mypage;
}
catch (Exception ex)
{
throw ex;
}
}

Jquery.Datatables 服务器处理(Server-side processing)

<div class="row">
<div class="col-lg-12">
<h1 class="page-header">微信用户管理</h1>
</div>
</div>
<!-- /.col-lg- -->
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="row-fluid" id="div-advanced-search">
<form class="form-inline well">
<span>openid:</span>
<input type="text" class="input-medium" placeholder="openid" id="openid-search">
<span>昵称:</span>
<input type="text" class="input-medium" placeholder="昵称" id="nickname-search">
@* <span>工作地点:</span>
<input type="text" class="input-medium" placeholder="工作地点" id="office-search">
<span>编号:</span>
<input type="text" class="input-medium" placeholder="编号" id="extn-search">
<span>在线状态:</span>
<select class="input-small" id="status-search">
<option value="">全部</option>
<option value="">在线</option>
<option value="">离线</option>
</select>
<select class="input-small" id="role-search">
<option value="">全部</option>
<option value="">管理员</option>
<option value="">操作员</option>
</select>*@
<button type="button" class="btn" id="btn-advanced-search"><i class="fa fa-search"></i>查询</button>
<button type="button" class="btn" id="btn-clear-search"><i class=""></i>清空</button>
</form>
</div> <div class="panel-heading">
微信用户
</div>
<!-- /.panel-heading -->

Jquery.Datatables 服务器处理(Server-side processing)

重点来了,搜索就用自定义搜索
//column().search()

//地址:https://datatables.net/reference/api/column().search()

//自定义搜索
//column().search()
//地址:https://datatables.net/reference/api/column().search()
$("#btn-advanced-search").click(function () {
tables.column()
.search($('#openid-search').val())
.column()
.search($('#nickname-search').val())
.draw();
}); //清空
$("#btn-clear-search").click(function () {
$('#openid-search').val('');
$('#nickname-search').val('');
tables.column()
.search($('#openid-search').val())
.column()
.search($('#nickname-search').val())
.draw();
});
上一篇:Jquery DataTables warning : Requested unknown from the data source for row 0


下一篇:Jsp与servlet本质上的区别