首页 > 经验记录 > WEB > DataTables前端插件以及其使用方式详解

DataTables前端插件以及其使用方式详解

作为一个表格工具可以说是很强大了

在公司里用了几天,还算是比较熟练了。

记录一下

 

首先前端得有个表格。

我这用的JQuery选中的表格#table_plan_all就是我这个代码对应的表格。

 

最主要的参数,data,该参数后面接的是表格中需要展示的数据。JSON数组格式。我这里初始化为一个空数组是因为业务需要。搜索完毕后在重新加载。

一般先获取到JSON数组格式的数据,直接初始化datatbles。

 

columns,看名字就明白,列

该参数主要用来定义该表格中每列的数据(首先页面的table得有个表头。th数量和这里面放的长度要一致)。

会从数组中的每一个JSON对象中取出来。

 

columnDefs该参数则是要对数据进行的处理,不进行处理的话就直接将columns定义的列对应属性往td里塞。

该参数下边还有几个参数

targets:对哪列的数据进行处理,datatables索引从0开始。负数就是倒着数从1开始,比如-1是倒数第一行

render:进行处理的方法,写个function

该function可以注入很多参数。我只知道第一个参数是columns定义的对象属性。第三个可以直接通过该参数点出该行其他列的数据,假设第三个入参叫row,则可以书写:row.xxxx,然后获取到该行叫做xxxx的那列数据

 

在下面的不需要管了,直接用就行。我是没有研究

 

示例代码:

 

 


EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00