DataTables配置和使用

1、DataTables配置和使用WEB后台开发，如果用的是Bootstrap框架，那这个表格神器你一定不要错过。官方地址：What?英文不好，没关系咱有中文的http:/datatables.club/不过我还是建议看英文的，因为比较全面虽然访问的速度慢点，终归能进的去。闲话不过说，先来个小例子吧。1 .先引用一下脚本地址，最好版本是一致的<linkrel="stylesheet"href="dataTables.bootstrap.min.css"><scriptsrc="jquery.dataTables.min.js&qu

2、ot;></script><scriptsrc="dataTables.bootstrap.min.js"></script>2 .配置一下本地化复制代码"oLanguage":"sProcessing":"处理中.”，"sLengthMenu":"每页_MENU_项”，"sZeroRecords":"没有匹配结果","sInfo":"当前显示第_START_至_END_项，共_TOT

3、AL_项。","sInfoEmpty":"当前显示第0至0项，共0项","sInfoFiltered":"（由_MAX_项结果过滤）","sInfoPostFix":"","sSearch":"搜索:"，"sUrl":"","sEmptyTable":"表中数据为空","sLoadingRecords":"载入中.”，

4、"sInfoThousands":",","oPaginate":"sFirst":"首页","sPrevious":"上页","sNext":"下页","sLast":"末页"，"sJump":"跳转","oAria":"sSortAscending":":以升序排列此列",&

5、quot;sSortDescending":":以降序排列此列",复制代码写到这里要说一句，上边这段本地化配置，有没有发现它的命名挺奇怪的，前边都有一个小写的o、s之类的，但是现在官网并不这样命名了，当然这并不影响我们使用它，下边是比较新的配置参数。复制代码language:"decimal":"","emptyTable":"Nodataavailableintable","info":"当前显示第_START_至_END_项，共_TOTAL_项。&qu

6、ot;infoEmpty":"当前显示第0至0项，共0项","infoFiltered":"（由_MAX_项结果过滤）"，"infoPostFix":"","thousands":",","lengthMenu":"每页_MENU_项"，"loadingRecords":"载入中"，"processing":"处理中"，&quo

7、t;search":"搜索:"，"zeroRecords":"没有匹配结果"，"paginate":"first":"首页","previous":"上页"，"next":"下页","last":"末页","aria":"sortAscending":":以升序排列此列"sortDesce

8、nding":":以降序排列此列复制代码如果从开发角度来讲的话，每次都初始化这个配置，挺麻烦的，所以我们可以封装成文件，下个页面引用一下就可以了，接下来创建一个名字为dataTables.defaults.js的文件代码如下复制代码$.extend（$.fn.dataTable.defaults,language:"decimal":"","emptyTable":"Nodataavailableintable","info":"当前显示第_START_至_END_

9、项，共_TOTAL_项。","infoEmpty":"当前显示第0至0项，共0项","infoFiltered":"（由_MAX_项结果过滤）","infoPostFix":"","thousands":",","lengthMenu":"每页_MENU_项","loadingRecords":嚷入中"，"processing":&quo

10、t;处理中"，"search":"搜索:","zeroRecords":"没有匹配结果","paginate":"first":"首页"，"previous":"上页"，"next":"下页","last":"末页"),"aria":"sortAscending":":以升序排列

11、此列","sortDescending":":以降序排列此列");复制代码!我现在我们的语言本地化配置就算结束了，如果单独的文件一定别忘记引用3 .下面我们看下别的配置页面代码很简单<tableid="table"class="tabletable-condensedtable-hover"></table>基础配置复制代码vartable=$("#table").DataTable(lengthMenu:20,40,60,-1,20,40,60,"A

12、ll",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",visibl

13、e:true,title:"账号"，data:"Account",title:"密码"，data:"PassWord",title:"状态"，data:"StatusName",title:"时间"，data:"CreateTime",ajax:url:'/User/GetUserList',type:'POST');复制代码其他配置就不说了，就只说说dom吧，这个配置项是操作搜索、数据信息、按钮、每页显

14、示多少条这几个选项的的位置l-Lengthchanging改变每页显示多少条数据的控件f-Filteringinput即时搜索框控件t-TheTable表格本身i-Information表格相关信息控件p-Pagination分页控件r-pRocessing加载等待显示信息<>-divelements代表一个div元素<div><div><"#id">-divwithanid指定了id的div元素<divid='id'><div>"class">-divwith

15、aclass指定了样式名的div元素<divclass='class'><div><"#id.class">-divwithanidandclass指定了id和样式的div元素<divid='id'class='class'><div>要显示什么元素，显示在什么位置自己安排就好了，我比较习惯上边的筛选项自己定义，所以表格上的信息就被我隐藏掉了下面展示一下后端的代码，比较简单没有做什么抽象之类的复制代码publicActionResultGetUserList()(Us

16、erInfoquery=newUserInfo(PageStart=Convert.ToInt32(Request.Form.Get("start"),PageEnd=Convert.ToInt32(Request.Form.Get("length")；vardata=userInfoService.FindUserInfoList(query).ToList();intcount=userInfoService.FindUserInfoListCount(query)；DataTableModel<UserInfo>model=newDat

17、aTableModel<UserInfo>()(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();returnConten

18、t(Newtonsoft.Json.JsonConvert.SerializeObject(model,iso);)复制代码这里还要说下注意的地方,Request.Form.Get("draw")请求次数计数器，每次发送给服务器后又原封返回，不用做什么处理，切记一定要返回，不然错哪你都不知道。就可以了Request.Form.Get("start")第一条数据的起始位置，从0开始，页码*页数=start如果你用的是mysql数据库，就方便了limitstart,lengthRequest.Form.Get("length")每页显示的条数dataTables接受的参数必须按照下面这样，它才会认识复制代码"draw":2,"recor