layui的数据表格(table)分页篇

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui的数据表格(table)分页篇相关的知识,希望对你有一定的参考价值。

参考技术A

首先,最简单的先渲染一个表格,参考官方示例:

这里先讲讲一些渲染细节:
layui内部就是根据cols属性里面每项的field字段来输出数据(该字段跟后台返回的数据字段一致即可输出)。
另外,layui拼接html字符串的方式多次应用数组join方法的方式,这种方式值得安利一波:

否则用传统方式拼接html字符串就相形见绌了(不推荐):

接着,看一下分页:

从图中可以看出,我们请求地址没加请求参数,layui自动帮我们添加了page,limit的请求参数,默认值分别为1, 10,这是开启了分页的缘故(page: true)。那么,请求参数名是否可以定制呢?答案是可以的,参考request属性:

同样,响应参数名也是可以定制的,参考response属性:

注意,以上只是定制了参数名字而已,接下来才是重头戏:定制数据格式,参考parseData属性:

parseData可以帮助我们定制好与layui对应的表格数据格式,从而输出表格,这是很有用的,毕竟后端前辈返回的数据格式未必跟layui的一致呀。有了以上3种定制方式,我们就不惧输出数据表格了。采用这种方式输出的就是真正的实现了分页,下文提及的方式可不是真正的分页。

-----------------------快乐的分割线,前方jojo高能-----------------------

可能也有小伙伴无视了 request、response、parseData 三剑客,转而用起了data属性,过程如下:
拒绝了使用url属性请求,转用jquery ajax请求数据,最后再tableIns.reload( data: res.data )一波,达成666操作。
这种做法从结果上看,似乎是可以的。。。。。。搭嘎,口头挖撸。

因为通过data属性赋值是不会分页去请求后端的,而是直接请求全部数据,然后layui内部进行前端分页处理,这样一来,如果数据量大的话,恐怕页面就要刷好一会儿了o(╥﹏╥)o。(只有通过data方式赋值才会进行前端分页处理,所以url方式可以放心食用)。

以上是关于layui的数据表格(table)分页篇的主要内容,如果未能解决你的问题,请参考以下文章

layui中table表格的基本操作

layui 数据表格重新加载数据分页器回到第一页

layui数据表格如何根据列名修改整列的值?

LayUI

layui 数据表格使用

Layui数据表格 加入 自定义扩展方法(重新渲染Render当前页数据)