使用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)
相关推荐
@小红花44 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵1 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456702 小时前
学习日记-HTML-day51-9.9
前端·学习·html