jQuery表格插件datatables用法汇总


Posted in Javascript onMarch 29, 2016

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

一、初始化
在页面中

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
  <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
 </head>
 <body>
  <table id="table_id" class="display">
 <thead>
  <tr>
   <th>Column 1</th>
   <th>Column 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Row 1 Data 1</td>
   <td>Row 1 Data 2</td>
  </tr>
  <tr>
   <td>Row 2 Data 1</td>
   <td>Row 2 Data 2</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 () {
     return that.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 '<button id="msgsndButton" class="msgsnd glyphicon glyphicon-comment"></button>' +
      ' <button id="forbidButton" class="forbid glyphicon glyphicon-thumbs-down"></button>'+
      '<input type="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 '<input type="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 官网

Javascript 相关文章推荐
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
js实现简单的计算器功能
Jan 16 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
JavaScript中的高级函数
Jan 04 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
基于javascript实现tab切换特效
Mar 29 #Javascript
基于javascript实现简单的抽奖系统
Apr 15 #Javascript
基于javascript实现九宫格大转盘效果
May 28 #Javascript
全屏js头像上传插件源码高清版
Mar 29 #Javascript
js闭包引起的事件注册问题介绍
Mar 29 #Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 #Javascript
js滚动条平滑移动示例代码
Mar 29 #Javascript
You might like
php之readdir函数用法实例
2014/11/13 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
python在命令行下使用google翻译(带语音)
2014/01/16 Python
python实现查询苹果手机维修进度
2015/03/16 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
元宵节主持词
2014/03/25 职场文书
健康家庭事迹材料
2014/05/02 职场文书
房地产推广策划方案
2014/05/19 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
小学教师个人总结
2015/02/05 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
了解Redis常见应用场景
2021/06/23 Redis
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android