jQuery表格插件datatables用法汇总

前端之家收集整理的这篇文章主要介绍了jQuery表格插件datatables用法汇总前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下

一、初始化

页面

Column 1

js中初始化

二、常用配置

在初始化的时候可以通过一些常用的配置项对表格进行配置,这是我在项目中实际用到的

页面长度 (每页的行数) 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 () { return that.getQueryParams(); // ajax的参数 } },columns: [ {title: "id",data: "id",orderable: true},{title: "uid",data: "uid",orderable: false},{title: "昵称",data: "nick",{title: "姓名",data: "name",{title: "电话",data: "tel",{title: "申请时间",data: "stimeshow",{title: "状态",data: "statshow",{ title: "操作",orderable: false,render: function (data,type,full) { return '

后台传回的数据一定要是一个map,key是 "data",value 是数据(如果数据是List要 toArray()),其中 data 也是 DataTables 的参数之一,表示表格要显示的数据,所以你可以在这个map中放上其他的表格参数,只要把key设置为参数名就可以了。

*:配置中serverSide开启服务器模式,在工作使用中表格的数据是通过ajax从后台获取,就理所当然地打开了这个模式,但是表格对某一列排序的功能就失效了,而随后我关闭了这一模式,发现就可以对表格中的列进行排序,表格的数据还是从服务器获取……所以这个模式还有待研究

**: 在项目中后台controller接收的参数是数组,ajax的请求包含复杂参数的时候,请求的类型一定要是post;

三、进阶功能

1、隐藏列 可以通过 "columns.visible" 属性规定列是否显示,但是这样就不能获取此列的值,如果要隐藏id列,又要根据id触发事件就办不到了 = =,后来查API后想了一个笨办法,可以借助 columns.render 属性用法如下:

注意 render 后的函数有三个参数,data/type/full,其中full参数是行的所有数据(官网在此注明:只是行中的数据,而不是data属性的值,所以就算data中有你想要的值,但你没有给他一列的话也是获取不到的),可以在render中直接使用你想隐藏的值,如果表格外部要引用这个值,可以在render中组装一个隐藏的,外部就可以获取到了,不过这种方法真的非常蠢,如果你有好的方法,请一定要告诉我。

2、输入页码@R_155_404@面 我们可以通过 pagingType 属性来设置表格分页按钮样式,但是DataTables的几个默认样式都没有项目中需要的输入页码进行跳转的样式。但是在官网的 plug-in 页中介绍了几种分页按钮的插件,其中的 input 分页插件就可以满足我们的需求,只要引入插件的js,再将 pagingType 的值改为 "input" 就可以了。js文件的 CDN 是:

//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js

内容,希望对大家的学习有所帮助。

nofollow" target="_blank" style="text-align: left; padding-bottom: 0px; text-transform: none; background-color: rgb(255,255,255); text-indent: 0px; margin: 0px; padding-left: 0px; letter-spacing: normal; padding-right: 0px; font: 12px/18px Verdana,Arial,Helvetica,sans-serif; white-space: normal; color: black; word-spacing: 0px; text-decoration: underline; padding-top: 0px; -webkit-text-stroke-width: 0px" href="http://datatables.net/">DataTables 官网

原文链接:https://www.f2er.com/jquery/49503.html

猜你在找的jQuery相关文章

Column 2