DataTables 控件使用和心得 (1)
2015-12-23 16:22
363 查看
博客来自:http://www.cnblogs.com/zergcom/p/4428338.html?utm_source=tuicool&utm_medium=referral
更多干货等你来拿 http://www.itit123.cn/
基于JQuery
开源并且免费(除特殊支持服务)
主要特色: 高性能,响应式,功能完整
主网站为http://www.datatables.net/
本身虽然为开源免费软件,但支持力度很高,更新频繁;主网站内容丰富,详尽.另外也提供付费的支持服务.
支持Ajax数据获取,提供真分页实现方案.
提供多种常见主题支持DataTables, jQuery UI, Bootstrap, Foundation
完全支持响应式设计
完美支持排序,翻页,自定义行列显隐,样式和内容.
自动控制列宽.
灵活控制表格的滚动条设定.
多语言支持
另外通过扩展功能还可以实现
列的拖动
单列过滤
行或列的固定
表格内编辑
少量类Excel功能(如键盘选择,拖动赋值)
Excel, PDF导出功能
也可以使用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组件
#example对应了id=example的一个table元素.
一般来说dataTable函数会以一个对象为参数,这个参数对象就是DataTables的Options,这些Options用于控制列表控件的各种特性.(关于Options的具体内容我们以后讨论,也可以参阅官方文档)
当然,在没有任何Options的情况下,DataTables是给出了一个标准的界面,如下图:
![](http://images.cnitblog.com/blog2015/82607/201504/151346157143672.png)
左上是页内条数控制(默认为1页10个),右上是简单搜索功能,中间是列表主体,左下是分页信息,右下是分页控制.这些控件都可以通过Options进行显隐, 控制和自定义.
注意,dataset是一个数组对象,一般的格式是: [obj1,ojb2,ojb3….] , 每一个obj对象对应每一行的数据, 这个对象的属性会被依次绑定到每一个列中.
url为远程请求的地址.
这里需要特别注意的是,由于dataTables内部实现机制,其返回的json并不是一个简单的数组对象,而是一个包含一个data属性的对象,具体格式参考如下:
{ “data” : [obj1,obj2,obj3……] }
当然就算是用HTML定义<thead>,但数据中属性的顺序和<th>的顺序不同,或者有些属性并不需要显示出来,该怎么办呢, 依然可以通过columns配置属性来进行定义.
另外在使用标准dataTable函数以后,以上3种数据方式加载的列表,都可以完美的实现,简单搜索,分页和排序功能(真翻页的实现要稍微复杂一点,这个后续文章再进行描述).
这篇文章仅仅是入门级的,让大家初步了解这个组件的基本面貌,一些比较详尽的内容我会在随后的博文中讨论,如果大家有兴趣了解这个控件,或者已经在使用这个控件,希望和我交流的,还请不吝赐教.
更多干货等你来拿 http://www.itit123.cn/
什么是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是给出了一个标准的界面,如下图:
![](http://images.cnitblog.com/blog2015/82607/201504/151346157143672.png)
左上是页内条数控制(默认为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种数据方式加载的列表,都可以完美的实现,简单搜索,分页和排序功能(真翻页的实现要稍微复杂一点,这个后续文章再进行描述).
这篇文章仅仅是入门级的,让大家初步了解这个组件的基本面貌,一些比较详尽的内容我会在随后的博文中讨论,如果大家有兴趣了解这个控件,或者已经在使用这个控件,希望和我交流的,还请不吝赐教.
相关文章推荐
- PowerDesigner 生成对应数据库的sql脚本
- js对象的用法以输出对象字符串长度
- 各种内排序算法的实现及性能比较
- 带输入框的下拉控件
- HDU-1023 -Train Problem II(卡特兰数)
- 国家电话区号
- 一台服务器下启多个Tomcat
- Vim经典讲解
- 【html/css】若母div设置了透明度,如何才能使得里面的子div不继承母div的透明度
- IOS
- Android ListView 九大重要属性详细分析
- java base64图片编码解码
- 从配置文件中初始化spring profile
- ActiveX(三)ActiveX 调用 Js
- 类似微信选择添加删除图片的demo
- python文件处理--笔记
- dede会员指定栏目发布文章
- android高仿微信UI点击头像显示大图片效果
- 微信开放平台开发(1) 语义理解
- linux命令(1):touch