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种数据方式加载的列表,均可以完美的实现,简单搜索,分页和排序功能(真翻页的实现要稍微复杂一点,这个后续文章再进行描述).

这篇文章仅仅是入门级的,让你们初步了解这个组件的基本面貌,一些比较详尽的内容我会在随后的博文中讨论,若是你们有兴趣了解这个控件,或者已经在使用这个控件,但愿和我交流的,还请不吝赐教.