什么是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();} );

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：DataTables 控件使用和心得

关键词：DataTable