|
|
DataTables配置和使用
WEB后台开发，如果用的是Bootstrap框架，那这个表格神器你一定不要错过。
官方地址：https://datatables.net/
What？英文不好，没关系咱有中文的http://datatables.club/
不过我还是建议看英文的，因为比较全面虽然访问的速度慢点，终归能进的去。闲话不过说，先来个小例子吧。
1.先引用一下脚本地址，最好版本是一致的
2.配置一下本地化
复制代码
"oLanguage":{
"sProcessing":"处理中...",
"sLengthMenu":"每页_MENU_项",
"sZeroRecords":"没有匹配结果",
"sInfo":"当前显示第_START_至_END_项，共_TOTAL_项。",
"sInfoEmpty":"当前显示第0至0项，共0项",
"sInfoFiltered":"(由_MAX_项结果过滤)",
"sInfoPostFix":"",
"sSearch":"搜索:",
"sUrl":"",
"sEmptyTable":"表中数据为空",
"sLoadingRecords":"载入中...",
"sInfoThousands":",",
"oPaginate":{
"sFirst":"首页",
"sPrevious":"上页",
"sNext":"下页",
"sLast":"末页",
"sJump":"跳转"
},
"oAria":{
"sSortAscending":":以升序排列此列",
"sSortDescending":":以降序排列此列"
}
},
复制代码
写到这里要说一句，上边这段本地化配置，有没有发现它的命名挺奇怪的，前边都有一个小写的o、s之类的，但是现在官网并不这样命名了，当然这并不影响我们使用它，下边是比较新的配置参数。
复制代码
language:{
"decimal":"",
"emptyTable":"Nodataavailableintable",
"info":"当前显示第_START_至_END_项，共_TOTAL_项。",
"infoEmpty":"当前显示第0至0项，共0项",
"infoFiltered":"(由_MAX_项结果过滤)",
"infoPostFix":"",
"thousands":",",
"lengthMenu":"每页_MENU_项",
"loadingRecords":"载入中...",
"processing":"处理中...",
"search":"搜索:",
"zeroRecords":"没有匹配结果",
"paginate":{
"first":"首页",
"previous":"上页",
"next":"下页",
"last":"末页"
},
"aria":{
"sortAscending":":以升序排列此列",
"sortDescending":":以降序排列此列"
}
}
复制代码
如果从开发角度来讲的话，每次都初始化这个配置，挺麻烦的，所以我们可以封装成文件，下个页面引用一下就可以了，接下来创建一个名字为dataTables.defaults.js的文件代码如下
复制代码
$.extend($.fn.dataTable.defaults,{
language:{
"decimal":"",
"emptyTable":"Nodataavailableintable",
"info":"当前显示第_START_至_END_项，共_TOTAL_项。",
"infoEmpty":"当前显示第0至0项，共0项",
"infoFiltered":"(由_MAX_项结果过滤)",
"infoPostFix":"",
"thousands":",",
"lengthMenu":"每页_MENU_项",
"loadingRecords":"载入中...",
"processing":"处理中...",
"search":"搜索:",
"zeroRecords":"没有匹配结果",
"paginate":{
"first":"首页",
"previous":"上页",
"next":"下页",
"last":"末页"
},
"aria":{
"sortAscending":":以升序排列此列",
"sortDescending":":以降序排列此列"
}
}
});
复制代码
我现在我们的语言本地化配置就算结束了，如果单独的文件一定别忘记引用!!
3.下面我们看下别的配置
页面代码很简单
|
基础配置
复制代码
vartable=$("#table").DataTable({
lengthMenu:[[20,40,60,-1],[20,40,60,"All"]],
sort:false,
pageLength:20,
pagingType:"full_numbers",
paging:true,
searching:false,//屏蔽datatales的查询框
dom:''rt<"row"<"col-md-4"i><"col-md-8"p>>'',
processing:true,
serverSide:true,
columns:[
{title:"编号",data:"Uid",visible:true},
{title:"账号",data:"Account"},
{title:"密码",data:"PassWord"},
{title:"状态",data:"StatusName"},
{title:"时间",data:"CreateTime"},
],
ajax:{
url:''/User/GetUserList'',
type:''POST''
}
});
复制代码
其他配置就不说了，就只说说dom吧，这个配置项是操作搜索、数据信息、按钮、每页显示多少条这几个选项的的位置
l-Lengthchanging改变每页显示多少条数据的控件
f-Filteringinput即时搜索框控件
t-TheTable表格本身
i-Information表格相关信息控件
p-Pagination分页控件
r-pRocessing加载等待显示信息
<>-divelements代表一个div元素<"#id">-divwithanid指定了id的div元素 <"class">-divwithaclass指定了样式名的div元素 <"#id.class">-divwithanidandclass指定了id和样式的div元素
要显示什么元素，显示在什么位置自己安排就好了，我比较习惯上边的筛选项自己定义，所以表格上的信息就被我隐藏掉了.
下面展示一下后端的代码，比较简单没有做什么抽象之类的
复制代码
publicActionResultGetUserList()
{
UserInfoquery=newUserInfo
{
PageStart=Convert.ToInt32(Request.Form.Get("start")),
PageEnd=Convert.ToInt32(Request.Form.Get("length"))
};
vardata=userInfoService.FindUserInfoList(query).ToList();
intcount=userInfoService.FindUwww.baiyuewang.netserInfoListCount(query);
DataTableModelmodel=newDataTableModel()
{
draw=Convert.ToInt32(Request.Form.Get("draw")),
recordsTotal=count,
recordsFiltered=count,
data=data,
error=string.Empty
};
variso=newNewtonsoft.Json.Converters.IsoDateTimeConverter();
iso.DateTimeFormat="yyyy-MM-ddHH:mm:ss";
objectobj=newobject();
returnContent(Newtonsoft.Json.JsonConvert.SerializeObject(model,iso));
}
复制代码
这里还要说下注意的地方，
Request.Form.Get("draw")请求次数计数器，每次发送给服务器后又原封返回，不用做什么处理，切记一定要返回，不然错哪你都不知道。
Request.Form.Get("start")第一条数据的起始位置，从0开始，页码页数=start如果你用的是mysql数据库，就方便了limitstart,length就可以了
Request.Form.Get("length")每页显示的条数
dataTables接受的参数必须按照下面这样，它才会认识
复制代码
{
"draw":2,
"recordsTotal":24,
"recordsFiltered":24,
"data":[
{
"Uid":1,
"Account":"aaaaaa@hotmail.com",
"PassWord":"123456",
},
{
"Uid":2,
"Account":"bbbbb@hotmail.com",
"PassWord":"456123",
}
],
"error":""
}
|
|
