DataTables 控件使用和心得 (1)

痛定思痛。 2022-08-18 14:10 118阅读 0赞

博客来自：[http://www.cnblogs.com/zergcom/p/4428338.html?utm\_source=tuicool&utm\_medium=referral][http_www.cnblogs.com_zergcom_p_4428338.html_utm_source_tuicool_utm_medium_referral]

更多干货等你来拿 [http://www.itit123.cn/][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][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][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是给出了一个标准的界面,如下图:

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

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

[http_www.cnblogs.com_zergcom_p_4428338.html_utm_source_tuicool_utm_medium_referral]: http://www.cnblogs.com/zergcom/p/4428338.html?utm_source=tuicool&utm_medium=referral
[http_www.itit123.cn]: http://www.itit123.cn/
[http_cdn.datatables.net_1.10.6_js_jquery.dataTables.min.js]: http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js
[http_cdn.bootcss.com_datatables_1.10.6_js_jquery.dataTables.min.js]: http://cdn.bootcss.com/datatables/1.10.6/js/jquery.dataTables.min.js
[151346157143672.png]: /images/20220731/49a818cf8d1a4467a2f62d8459a9a9cd.png