使用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)