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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 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实现的功能是显示8条基色色带
2006/10/09 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
django认证系统实现自定义权限管理的方法
2018/07/16 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
jupyter notebook清除输出方式
2020/04/10 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
青年安全生产示范岗事迹材料
2014/05/04 职场文书
技校毕业生自荐信
2014/06/03 职场文书