人人FED

专注于前端技术

使用Datatables做后台小结

Datatables是一个表格的插件,它的功能很强大,支持前端的分页、搜索、排序和导出,基本上用这个可以完成绝大多数的表格需求,特别是做后台系统,通常要展示数据表格,这个是我第一次做后台的时候引入的,现在已经在几个后台系统实践过。本篇简单介绍下它的几个主要的功能。

1. 安装

它的官网是这个:https://datatables.net/,可以打开它的官网感受一下它的几个demo。它的样式上使用了bootstrap。

最好是把它的文件下载下来,然后放到自己的服务器上,因为它提供的cdn是外国,网速比较慢。然后用html标签引入:

2. 初始化

html用table,并且table里面一定要有thead/tbody,不然它会报错,正确的html:

然后就可以初始化datatables,如下JS:

上面指定分页大小为10,按第2列降序排序,效果如下:

它还支持导出,导出Excel/pdf/csv等,一般导出exel就好了,可以添加以下初始化参数:

它是用的flash做的导出,由于Chrome已经默认不开启flash,所以需要在Chrome的设置里面打开,还有Safari不支持flash。由于后台一般是做给自己人用的,所以还好。效果如下:

3. 高级功能

(1)导出过滤

导出的时候,如果td里面有a标签:

导出的时候会把a标签也带上,因为它会把td里面的内容都导出来,所以需要做下过滤,这个可以添加以下配置:

上面还指定了导出列,因为有时候不想所有列都导出,有些列是按钮操作。

(2)指定默认排序列

有些表格可能需要按id列排序,有些可能要按名字的列排序,如下指定默认排序列:

上面代码是按第3列(从0开始)降序排序。

有时候会遇到一个问题,就是按时间排序,但是时间显示的是年月日,这样就导致同一天的无法做区分,无法按实际生成的时间排序,可以使用ID排序,但是ID列不需要显示,那怎么办呢?可以用另外一个参数:

然后把0列的id给隐藏了,就可以了。

(3)按给定字段搜索

Datatables提供了一个默认的关键词全局搜索,如下图的Keyword输入框,只要当前行任意列能匹配这个字符串,当前行就显示。但是经常希望按某一列搜索,如下图所示:

那应该怎么办呢?Datatables支持添加自定义过滤函数,在这个函数里面会传当前行所有列的数据给你,然后自己判断是否符合要求,如果是的话就return true,返回return false表示不要这一列。

所以可以监听输入框的input/change事件,然后获取输入的内容触发Datatables的draw函数进行过滤,如下代码添加一个过滤函数:

然后再监听下拉输入框的change事件,在里面调dataTables的重绘API:

以上就是Datatables的一些用法,如果不能满足需求的,可以继续查找其它的使用方法。
如果后台的数据不多,可以让后端把全部数据都返回给你,然后自己做分页、搜索、排序、导出,就不用什么都调接口了,这样可以省去很多麻烦。

目录: 框架组件

2 回复

Trackbacks

  1. 2017-09-22 前端日报 – 程序员的匠心
  2. 2017-09-22 前端日報 - 程序員的後花園

发表评论

邮箱地址不会被公开。 必填项已用*标注