一、简介
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。本文对dataTables插件使用做一定的记录。不常用或目前不用的方法就暂时放放只作为了解。
对于 dataTables 来说,表格必须通过 thead 和 tbody 进行说明
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>
Rendering engine
th>
<th>
Browser
th>
tr>
thead>
<tbody>
<tr class="odd gradeX">
<td>
Trident
td>
<td>
Internet Explorer 4.0
td>
tr>
二、使用方式
在 dataTables 中,参数名称的前缀用来说明参数的数据类型,很明显,b 表示布尔类型,i 表示整数类型,s 表示字符串’>字符串类型。
1.零配置方式:最简单的使用方式
头部引入所需js文件和css样式
<link rel="stylesheet" href="media/css/jquery.dataTables.css">
<script src="//code.jquery.com/jquery-1.12.3.min.js">script>
<script src="media/js/jquery.dataTables.js">script>
使用方法:
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
script>
表格的效果:
红框表示了四个默认的设置效果,分别用来选择每页的行数,表格的过滤器,表格的信息和换页。
使用了几个默认的参数设置:
bPaginate: 是否分页,默认为 true,分页
iDisplayLength : 每页的行数,每页默认数量:10
sPaginationType: 分页样式,支持两种内置方式,two_button 和 full_numbers, 默认使用 two_button。
bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10,25,50,100。这个设置需要 bPaginate 支持。默认为 true。
bFilter: 启用或禁止数据过滤,默认为 true。 注意,如果使用过滤功能,但是希望关闭默认的过滤输入框,应使用 sDom
bInfo: 允许或者禁止表信息的显示,默认为 true,显示信息。
我们也可以通过传递一个初始化参数对象来改变这些设置。例如,下面的例子将每页的行数设置为 20 行。
$(function () {
$("#example").dataTable(
{
iDisplayLength: 20
}
);
});
2 . 功能启用/禁用
比如,禁用bInfo:
$(document).ready(function() {
$('#example').DataTable( {
"info": false
} );
} );
效果图:
3 . 排序,asc正序 desc倒序
在官方示例中,对于表格的是否可排序是在初始化中设置的一个值来决定的
$("#example").dataTable( {
"sort": true,
});
指定单列排序:
如 :从第0列开始,以第4列倒序排列
$(document).ready(function() {
$('#example').dataTable( {
"sorting": [
[ 4, "desc" ]
]
} );
} );
指定多列排序:
指定某列不可排序:
$("#example").dataTable( {
"columnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }]
});
该值的含义为。初始化datatable,但对序号为0列的列不进行排序,别的列均可进行排序
4 . 多表格时
多个表格均不设置id值
用法:
$(document).ready(function() {
$('table.display').DataTable();
} );
5 . 隐藏列
6 . 复杂的头部
7 . 灵活设置表格宽度
在CSS文件中设置表格父容器的宽度
div.container {
width: 80%;
}
8 . 记录状态功能:开关,是否打开客户端状态记录功能。这个数据是记录在cookies中的,打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的
$(document).ready(function() {
$('#example').DataTable( {
stateSave: true
} );
} );
9 . 一般页数是可呈现7页,还可以用可扩展的分页机制,pagingType选项
numbers - 只显示数字页码
simple - 只显示’Previous’ and ‘Next’ buttons
simple_numbers - ‘Previous’ and ‘Next’ buttons以及 page numbers
full - ‘First’, ‘Previous’以及’Next’ and ‘Last’ buttons
full_numbers - ‘First’, ‘Previous’, ‘Next’ and ‘Last’ buttons, plus page numbers
$(document).ready(function() {
$('#example').DataTable( {
"pagingType": "full_numbers"
} );
} );
10 . 垂直滚动且不分页
$(document).ready(function() {
$('#example').DataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
} );
} );
11 . 水平滚动
$(document).ready(function() {
$('#example').DataTable( {
"scrollX": true
} );
} );
12 .水平垂直滚动
$(document).ready(function() {
$('#example').DataTable( {
"scrollY": 200,
"scrollX": true
} );
} );
回调函数: