jQuery表格插件datatables用法汇总
DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下
一、初始化
在页面中
<!DOCTYPEhtml> <html> <head> <linkrel="stylesheet"type="text/css"href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css"> <scripttype="text/javascript"charset="utf8"src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script> </head> <body> <tableid="table_id"class="display"> <thead> <tr> <th>Column1</th> <th>Column2</th> </tr> </thead> <tbody> <tr> <td>Row1Data1</td> <td>Row1Data2</td> </tr> <tr> <td>Row2Data1</td> <td>Row2Data2</td> </tr> </tbody> </table> </body> </html>
js中初始化
$(document).ready(function(){ $('#table_id').DataTable(); });
二、常用配置
在初始化的时候可以通过一些常用的配置项对表格进行配置,这是我在项目中实际用到的
$("#vivo_table_list").dataTable({ pageLength:10,//更改初始页面长度(每页的行数) processing:true,//显示正在处理字符串 serverSide:false,//服务器模式,这一点非常奇怪* ordering:true,//是否启用Datatables排序 searching:false,//开启搜索 autoWidth:false, zeroRecords:"没有查询数据", destroy:true,//从当前上下文销毁掉Datatables对象(妹搞懂) pagingType:"input",//分页按钮种类显示选项 language:{ url:"cn.txt"//本地化 }, dom:"tr<'row-fluid'<'span6'i><'span6'p>>",//按什么顺序定义表的控制元素在页面上出现(妹搞懂) ajax:{ url:"/url", type:"post",//ajax请求的类型** data:function(){ returnthat.getQueryParams();//ajax的参数 } }, columns:[ {title:"id",data:"id",orderable:true}, {title:"uid",data:"uid",orderable:false}, {title:"昵称",data:"nick",orderable:false}, {title:"姓名",data:"name",orderable:false}, {title:"电话",data:"tel",orderable:false}, {title:"申请时间",data:"stimeshow",orderable:true}, {title:"状态",data:"statshow",orderable:false}, { title:"操作",orderable:false,render:function(data,type,full){ return'<buttonid="msgsndButton"class="msgsndglyphiconglyphicon-comment"></button>'+ '<buttonid="forbidButton"class="forbidglyphiconglyphicon-thumbs-down"></button>'+ '<inputtype="hidden"value="'+full.id+'"/>'; } } ] });
后台传回的数据一定要是一个map,key是"data",value是数据(如果数据是List要toArray()),其中data也是DataTables的参数之一,表示表格要显示的数据,所以你可以在这个map中放上其他的表格参数,只要把key设置为参数名就可以了。
*:配置中serverSide开启服务器模式,在工作使用中表格的数据是通过ajax从后台获取,就理所当然地打开了这个模式,但是表格对某一列排序的功能就失效了,而随后我关闭了这一模式,发现就可以对表格中的列进行排序,表格的数据还是从服务器获取……所以这个模式还有待研究
**:在项目中后台controller接收的参数是数组,ajax的请求包含复杂参数的时候,请求的类型一定要是post;
三、进阶功能
1、隐藏列
可以通过"columns.visible"属性规定列是否显示,但是这样就不能获取此列的值,如果要隐藏id列,又要根据id触发事件就办不到了==,后来查API后想了一个笨办法,可以借助columns.render属性,用法如下:
{ title:"操作",orderable:false,render:function(data,type,full){ return'<inputtype="hidden"value="'+full.id+'"/>'; } }
注意render后的函数有三个参数,data/type/full,其中full参数是行的所有数据(官网在此注明:只是行中的数据,而不是data属性的值,所以就算data中有你想要的值,但你没有给他一列的话也是获取不到的),可以在render中直接使用你想隐藏的值,如果表格外部要引用这个值,可以在render中组装一个隐藏的<input>,外部就可以获取到了,不过这种方法真的非常蠢,如果你有好的方法,请一定要告诉我。
2、输入页码跳转页面
我们可以通过pagingType属性来设置表格分页按钮样式,但是DataTables的几个默认样式都没有项目中需要的输入页码进行跳转的样式。但是在官网的plug-in页中介绍了几种分页按钮的插件,其中的input分页插件就可以满足我们的需求,只要引入插件的js,再将pagingType的值改为"input"就可以了。js文件的CDN是:
//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js
以上就是本文的全部内容,希望对大家的学习有所帮助。
DataTables官网