DataTables 控件使用和心得 (1) - 入门
什么是DataTables
- DataTables是一个基于HTML/CSS/JavaScript的前端列表组件.
- 基于JQuery
- 开源并且免费(除特殊支持服务)
- 主要特色: 高性能,响应式,功能完整
- 主网站为http://www.datatables.net/
DataTables的优势
完整全面的功能
其开发团队已经注入了大量心血,功能非常完整,已经可以适应绝大多数前端列表的开发需求.
丰富的API和支持
具有相当丰富的参数(Options)和函数(API)对控件进行定义和控制,实现各种灵活的配置和功能.
本身虽然为开源免费软件,但支持力度很高,更新频繁;主网站内容丰富,详尽.另外也提供付费的支持服务.
优秀的质量,稳定性和性能
声称有2900+套单位测试代码的支持;其主JS库压缩以后只有26K;另外其核心Render机制,是仅仅Render列表的显示部分内容(10000条数据200页,仅仅Render1页50条数据),为稳定高效提供了基础.
丰富的功能
目前比较有价值的功能包括
- 支持Ajax数据获取,提供真分页实现方案.
- 提供多种常见主题支持DataTables, jQuery UI, Bootstrap, Foundation
- 完全支持响应式设计
- 完美支持排序,翻页,自定义行列显隐,样式和内容.
- 自动控制列宽.
- 灵活控制表格的滚动条设定.
- 多语言支持
- 另外通过扩展功能还可以实现
- 列的拖动
- 单列过滤
- 行或列的固定
- 表格内编辑
- 少量类Excel功能(如键盘选择,拖动赋值)
- Excel, PDF导出功能
DataTables的安装
第一步: 下载并引入DataTables的主JS文件: jquery.dataTables.js或者jquery.dataTables.min.js
也可以使用CDN:
官方CDN: http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js
Bootstrap CDN: http://cdn.bootcss.com/datatables/1.10.6/js/jquery.dataTables.min.js
另外如果希望引入CSS,可以下载官方提供的几种常见的CSS样式:
http://www.datatables.net/manual/styling/
第二步: 对页面的指定列表元素调用DataTables组件
$(document).ready(function() { $('#example').dataTable(); } );
- #example对应了id=example的一个table元素.
- 一般来说dataTable函数会以一个对象为参数,这个参数对象就是DataTables的Options,这些Options用于控制列表控件的各种特性.(关于Options的具体内容我们以后讨论,也可以参阅官方文档)
当然,在没有任何Options的情况下,DataTables是给出了一个标准的界面,如下图:
左上是页内条数控制(默认为1页10个),右上是简单搜索功能,中间是列表主体,左下是分页信息,右下是分页控制.这些控件都可以通过Options进行显隐, 控制和自定义.
DataTables常见的3种数据方式
HTML数据
所有数据在指定的Table元素中以TR,TD方式已经存在,这个时候,调用默认的dataTable函数就可以实现该组件的默认功能. 调用方式与标准模式类似.
$(document).ready(function() { $('#example').dataTable(); } );
JS对象数据
指定的Table元素中不需要有任何数据.dataTable函数通过一个JS数组对象把数据加载到控件中去.写法如下:
$('#example').dataTable( {
"data": dataSet
} );
注意,dataset是一个数组对象,一般的格式是: [obj1,ojb2,ojb3….] , 每一个obj对象对应每一行的数据, 这个对象的属性会被依次绑定到每一个列中.
远程数据
通过Ajax从远程获取Json数据,并绑定到控件中去,写法如下:
$('#example').dataTable( {
"ajax": url
} );
url为远程请求的地址.
这里需要特别注意的是,由于dataTables内部实现机制,其返回的json并不是一个简单的数组对象,而是一个包含一个data属性的对象,具体格式参考如下:
{ “data” : [obj1,obj2,obj3……] }
DataTables常见问题
对于后面2中数据加载模式,我们可以想到,原Table元素中的<tbody>中是不需要定义任何内容的.但<thead>可以有2个选择,通过HTML定义,dataTable函数绑定; 或者完全由dataTable绑定和生成.如果是完全由dataTable控件生成,其写法如下:
$('#example').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Engine"},
{ "title": "Browser"},
{ "title": "Platform"},
{ "title": "Version", "class": "center"},
{ "title": "Grade", "class": "center"}
]
} );
当然就算是用HTML定义<thead>,但数据中属性的顺序和<th>的顺序不同,或者有些属性并不需要显示出来,该怎么办呢, 依然可以通过columns配置属性来进行定义.
$('#example').dataTable( {
"data": dataSet,
"columns": [
{ "data": "Engine"},
{ "data": "Browser"},
{ "data": "Platform"},
{ "data": "Version"}
]
} );
另外在使用标准dataTable函数以后,以上3种数据方式加载的列表,都可以完美的实现,简单搜索,分页和排序功能(真翻页的实现要稍微复杂一点,这个后续文章再进行描述).
这篇文章仅仅是入门级的,让大家初步了解这个组件的基本面貌,一些比较详尽的内容我会在随后的博文中讨论,如果大家有兴趣了解这个控件,或者已经在使用这个控件,希望和我交流的,还请不吝赐教.
