前端开发：一个开源、简单易用的jQuery表格插件（DataTables）

DataTables是一个基于jQuery库的开源（MIT协议）表格插件，支持添加、排序、分页、搜索、过滤等功能，使用简单、广受欢迎，可以与主流前端UI整合（如bootstrap、jQuery UI等）。支持4种方式数据源，HTML（DOM）来源的数据、Ajax数据源、JavaScript的源数据、服务器端处理。拥有普遍的配置选项和丰富的API文档。

一、下载与初始化

https://github.com/DataTables/DataTables

下载完成后解压，把解压后的文件放到项目任意位置，再在页面引入jQuery、DataTablesCss、DataTablesJs三个文件。

而后在body中建立一个table元素，设置id属性，以下图所示。

最后运行如下脚本，代码及效果以下。一个简单的带有分页的表格就完成了。

language.url属性是国际化文件地址，固然也能够自定义名称，更多国际化语言请前往官方网站了解详情。

中文简体：

https://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese.json

中文繁体：

https://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese-traditional.json

二、功能展现

⑴组件定位

datatables默认会打开部分组件，如分页按钮、表格信息、搜索框等，这些组件支持自定义布局。

⑵不一样分页样式

• numbers - 只有只有数字按钮

• simple - 只有上一页、下一页两个按钮

• simple_numbers - 除了上一页、下一页两个按钮还有页数按钮，Datatables默认是这个

• full - 有四个按钮首页、上一页、下一页、末页

• full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮

• first_last_numbers - 除首页、末页两个按钮还有页数按钮

⑶多列排序

⑷格式化数字显示格式

经过language.decimal选项能够配置数字的友好显示，好比1200450，显示为12.004,50

⑸隐藏列

索引从1开始，隐藏了二、3列的name和age。

⑹bootstrap样式

须要额外引入dataTables.bootstrap.min.js、bootstrap.min.css、dataTables.bootstrap.min.css三个文件。

⑺垂直滚动条

⑻复杂表头

⑼自定义事件

⑽列渲染

下面隐藏了年龄列，并把年龄拼接到姓名后。

官方网站：

https://www.datatables.net/

---

DataTables是目前使用普遍的表格插件之一，功能强大、文档丰富、表格样式丰富可以适应各类风格的网站，高度灵活可以为HTML表格添加各类高级的交互功能。支持插件扩展使DataTables变得更增强大，它的功能远不止于此，须要了解详情的请前往官方网站。

有哪里写得很差的地方请你们提出来，请轻喷，谢谢。 同时有什么与编程相关的好东西能够推举给我，再次感谢！