使用Layui实现表格数据的分页功能

最近在用Layui做表格数据的展示时想把所有的数据进行分页展示,于是在网上找了一个模板

html 复制代码
<script type="text/javascript" >
layui.use(['table','layer','form','laypage'], function(){
  var table = layui.table,
  layer = layui.layer,
  form = layui.form,
  laypage = layui.laypage;

  table.render({
	 id:"provinceReload"
	,elem: '#complainTable'
    ,url:'/detection_result_return'
    ,page: true
    ,method:'get'
    ,toolbar: '#complain_toolbar'
    ,limit:10
    ,cols: [
    			[
    			   {checkbox:true}//开启多选框
			      ,{field:'id', width:150,title: 'ID'}
			      ,{field:'serviceCode',width:150, title: '服务编号'}
			      ,{field:'Order',width:150, title: '订单号'}
			      ,{field:'Reason',width:150,title: '原因'}
			      ,{field:'Detail',width:150, title: '详情'}
			      ,{field:'plainState', width:150, title: '状态'}
			      ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
    			]
    	   ]
    ,limits: [5,10,20,50]
  });

});
</script>

注意要将你的url换为你自己的后端接口地址。

过程中遇到了一下问题,解决办法可以参考我的另一篇博客使用layui做表单数据展示时遇到的问题包括layui is not defined,请求异常,错误提示:parsererror,只有表头可以显示出来数据却显示不出-CSDN博客将数据展示出来后却发现并没有分页展示,而是将所有数据都在一页上进行了展示,于是我去了Layui官网寻找原因,我发现模板中Layui分页功能打开了,前端中按钮也已经出现但是点击按钮却没反应,

于是我上网查了才知道分页功能需要自己写代码实现该需求,我们可以按F12键或者右键检查,找到Network,可以发现当我们点击按钮的第几页时,他会向我们设置的后端接口发送一个ajax请求,

其中包括page(第几页)参数以及limit(一页展示几条数据)参数,因此我们可以根据请求中的参数返回该页需要展示的数据。

python 复制代码
data_len = len(show_data)
    # 获取分页参数
    page = request.args.get('page')
    limit = request.args.get('limit')
    # 分页
    page = int(page)
    limit = int(limit)
    start = (page - 1) * limit
    end = page * limit
    show_data = show_data[start:end]
    # print(show_data)
    response_data = {
        'code': 0,
        'msg': "",
        'count': data_len,
        'data': show_data
    }
    return jsonify(response_data)
相关推荐
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix14 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript