我们在做网站开发时,很常见的一个需求是做数据展示表,并且可能需要数据表能够实现一些数据筛选、排序等能够定制展现方式功能,也包括对表的样式美观会有一些需求。而这些全部都已经由Javascript的一个库——Datatables做到了,我们只需要学习一下这个库的使用,就可以轻松地做出比较美观,功能全面,高度可定制化的表格。
开始
官方提供的简单demo如下。只要引入JQUERY库以及DT(Datatables)的css和js三个文件就可以开始使用DT了。
<!--第一步:引入Javascript / CSS (CDN)-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<!--或者下载到本地,下面有下载地址-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.15/media/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
<!--第二步:添加如下 HTML 代码-->
<table id="table_id_example" 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>
<!--第三步:初始化Datatables-->
$(document).ready( function () {
$('#table_id_example').DataTable();
} );
生成的表格效果如下:
可以通过下拉框选择每页表格展示的记录条数,并通过右下方的按钮进行翻页;可以通过点击列旁边的按钮改变记录的排序;也可以在search框直接输入文字查询相关记录(搜索所有列的内容)。大家可以实际在这里感受一下。
定制自己的table
DT的一个比较突出的地方时它具有比较方便进行定制的特点,也就是你可以很简单地控制table要哪些控件,不要哪些控件,能提供哪些功能,不能提供哪些。
DataTables是一个可高度配置化的类库,可以在生成HTML tables过程中的所有方面实现定制。所有特性可以通过打开、关闭或者定制来满足你对表格所有的要求。 定制要先定义一个options,然后传入$().DataTable()构造函数,通过定制options的内容来实现定制。 - 例如下面的代码 scrollYOption 和 pagingOption 选项用来允许滚动和禁止分页:
$('#myTable').DataTable( {
scrollY: 300,
paging: false
} );
如上所述,只要在DT表的初始化函数里面用键值对的方式去对DT表的一些特性进行配置,就可以完成对生成表格的定制。很多的特性都是bool型的,用true和false就可以完成绝大多数的功能控制,就像开关一样简单。其它的就基本是一些数值类型的值配置。
再看一下这个例子:
$('#myTable').DataTable( {
searching: false,
ordering: false
} );
生成的表格效果如下:
可以看到,表格右上角的搜索框没了,列旁边的排序按钮也没了,因为我们在初始化函数里已经把这两个功能关闭了!so easy!
DT表的所有可配置选项在这里,以下是一些比较常用的选项:
选项 | 作用 |
jQueryUIOption | 控制是否使用jquerui的样式(需要引入jqueryui的css) |
infoOption | 控制是否显示表格左下角的信息 |
lengthChangeOption | 是否允许用户改变表格每页显示的记录数 |
orderingOption | 是否允许Datatables开启排序 |
pagingOption | 是否开启本地分页 |
processingOption | 是否显示处理状态(排序的时候,数据很多耗费时间长的话,也会显示这个) |
scrollXOption | 设置水平滚动 |
scrollYOption | 设置垂直滚动 |
searchingOption | 是否允许Datatables开启本地搜索 |
serverSideOption | 是否开启服务器模式 |
stateSaveOption | 保存状态 - 在页面重新加载的时候恢复状态(页码等内容) |
autoWidthOption | 控制Datatables是否自适应宽度 |
deferRenderOption | 控制Datatables的延迟渲染,可以提高初始化的速度 |
不过注意,如果配置时不小心把属性拼写错了,或者用到了DT表本身没有的属性,那么表格会变回普通的HTML原生表格的样式,这时回头检查一下刚才的配置哪里错了就行。
更具体的使用方式大家去看官网的手册就好啦!
从数据库获取数据源
本部分参照这里
这是最常见的需求了:从数据库获得数据,用DT表展示出来。
比较常用的一种方式就是用ajax去请求数据,这里介绍相应的两种方法,一种是直接将数据拿来展示,另一种将数据进行一定处理后再展示。
第一种直接展示
在DT表的初始化函数中,对”ajax”属性进行配置,其值设置为你的数据来源,可以是一个文件,也可以是一个请求地$(‘#example’).DataTable( {
“ajax”: “data.json”
} );返回的数据,有如下的格式要求:
//data.json格式:
{
"data": [
[{"Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120"},{.....},]
......
]
}
即{“data”:[{},{},….]},要保证首先最外层是一个json对象,只有一个key为”data”,其值为真正的数据源,以json数组的形式呈现,即[{},{},….]。
这样之后,ajax如果请求成功,就会自动将返回的数据源加载到DT表中。
处理后展示
有时候可能需要对传来的数据先进行一些格式处理,比如日期的格式化,或者比如讲一些文本转换成超链接形式,这时就用以下形式:
$('#example').DataTable( {
"ajax": {
"url": "data.json",
"dataSrc": function ( json ) {
for ( var i=0, ien=json['data'].length ; i<ien ; i++ ) {
json['data'][i]['title'] = '<a href="'+json['data'][i]['url']+'">json['data'][i]['title']</a>';
}
return json['data'];
}
}
} );
此时dataSrc参数对应的是一个回调函数,回调函数的参数json就是url请求回来的值,也就是我们之前的{“data”:[{},{},…]},我们通过对json数组进行遍历,做我们该做的处理(此处的示例是把标题做成了有超链接的功能),然后再return处理好的json数组(注意,此处return的是json数组[{},{},{}…..],而不是最外层是{“data”:[{},{},..]}形式的json对象了,否则数据是加载不出来的!)