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;
进阶功能
隐藏列
可以通过 "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>
,外部就可以获取到了,不过这种方法真的非常蠢,如果你有好的方法,请一定要告诉我。
输入页码跳转页面
我们可以通过 pagingType 属性来设置表格分页按钮样式,但是DataTables的几个默认样式都没有项目中需要的输入页码进行跳转的样式。但是在官网的 plug-in 页中介绍了几种分页按钮的插件,其中的 input 分页插件就可以满足我们的需求,只要引入插件的js,再将 pagingType 的值改为 "input" 就可以了。js文件的 CDN 是:
//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js
关于其他样式的分页插件参考这里
其他
DataTables是一个非常强大的表格插件,虽说上手比较慢。我用的版本是 1.10 ,在我接手项目的时候项目中用的还是1.9,结果所有参数、API采用匈牙利命名规则,名前都莫名其妙的加上了几个字母前缀,很难理解,在 1.10 版本后就改为驼峰命名规则,人性化多了。要看1.9.x和1.10.x参数名对照请点这里,要查找 1.9.x 的文档请点这里。
参考
DataTables 官网
DataTables 中文网
1.10.x与1.9.x参数名对照表
1.9.x 文档
jQuery DataTables 插件使用笔记的更多相关文章
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- jquery.dataTables插件使用例子详解
DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...
- jQuery DataTables插件分页允许输入页码跳转
背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...
- 使用jquery datatables插件遇到fnReloadAjax的问题
1 官网地址:http://www.datatables.net/ 2 基本参数介绍 http://blog.csdn.net/mickey_miki/article/details/8240477 ...
- 黄聪:Jquery+DataTables插件,如何在ajax调用服务器数据后,自动给tr添加id属性
http://legacy.datatables.net/usage/callbacks#fnRowCallback 主要通过 fnCreatedRow 事件来实现 var table = $('#t ...
- jQuery DataTables 获取选中行数据
如题 想获取操作 DataTables 获取选中行数据 案1.主要是利用 js getElementsByTagName 函数 然后对获取到的tr 进行操作 如下 function getChec ...
- Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析
一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...
- jQuery 的插件 dataTables
---恢复内容开始--- jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量 ...
- Datatables快速入门开发--一款好用的JQuery表格插件
博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...
随机推荐
- 分布式搜索elasticsearch 索引文档的增删改查 入门
1.RESTful接口使用方法 为了方便直观我们使用Head插件提供的接口进行演示,实际上内部调用的RESTful接口. RESTful接口URL的格式: http://localhost:9200/ ...
- linux中删除目录
在linux中删除一个目录很简单,很多人还是习惯用rmdir,不过一旦目录非空,就陷入深深的苦恼之中,现在使用rm -rf命令即可解决. 直接rm就可以了,不过要加两个参数-rf 即:rm -rf 目 ...
- poj1556
计算几何+最短路 最短路是套的模版..= = 毕竟不是自己写的..模版上的点竟然是从0开始的. 难在建图.图中,比如2和12点,其间如果没有任何线段阻挡,那么边权是他们的直线距离,如果有线段阻挡,边权 ...
- libpcre.so.1 cannot be found
安装完Nginx之后,启动报错. [vagrant@localhost sbin]$ sudo ./nginx ./nginx: error while loading shared librarie ...
- ThinkPHP3.1快速入门(2)数据CURD
上一篇中,我们了解了ThinkPHP的基础部分,以及如何创建一个控制器和模板,并知道了M方法的用法,本篇将会讲解下数据的CURD操作,探索下更多的数据操作. CURD CURD是一个数据库技术中的缩写 ...
- Installing the PHP/MongoDB extension on Mac OSX 10.8
Installing PHP/MongoDB extension is a two steps task on OSX: Install the autoconf tool required for ...
- 进程控制之wait3和wait4函数
大多数UNIX系统实现提供了另外两个函数wait3和wait4.它们提供的功能比POSIX.1函数wait.waitpid和waitid所提供的功能要多一个,这与附加参数rusage有关.该参数要求内 ...
- 关于android应用--内存的优化
以下内容为转载自网上,然后自己加工贴合到一块的: 原文地址:http://www.cnblogs.com/frydsh/archive/2012/12/09/2810601.html http://w ...
- 导出EXCEL数据时防止数值变科学计数的办法
网上有很多说法,最简单直接正确的做法是判断一下是否为数值以及长度,然后给单元格加上以下CSS即可: mso-generic-font-family:auto; mso-font-charset:1 ...
- pcap支持Python2.7.8解决办法
pcap库只支持到python2.5. pip install pcap在python2.7.8找不到. 只需要将网盘的2个文件放到python安装目录下lib/site-package文件夹即可 链 ...