DataTables 控件使用和心得 - 入门

Posted 2020-10-04 锋齐叶落

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

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