漂亮的layui 分页展示

对于后台管理系统,以前的分页展示是自己写的,这里写图片描述
虽然有点丑,但是至少功能很好用,
最近在研究layui,无意间发现它的分页标签很漂亮,废话不多说,先展示给大家看看
这里写图片描述
下面直接贴上代码,
page.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div class="layui-form">
    <span id="form_page"></span>
    每页
    <input id="page_size" onkeyup="this.value=this.value.replace(/\D/, '');" type="number" min="1" value="${requestScope.page.psize}" class="layui-input" style="width: 60px; height: 30px; display: inline;">
    行,共${requestScope.page.pcount}条数据
</div>
<script type="text/javascript">
    layui.define([ 'element', 'form', 'layer', 'laypage' ], function(exports) {
        var element = layui.element();
        var form = layui.form();
        var layer = layui.layer;
        var laypage = layui.laypage;

        var pindex = "${requestScope.page.pindex}";// 当前页
        var ptotalpages = "${requestScope.page.ptotalpages}";// 总页数
        var pcount = "${requestScope.page.pcount}";// 总记录数
        var psize = "${requestScope.page.psize}";// 每一页的记录数

        // 分页
        laypage({
            cont : 'form_page', // 页面上的id
            pages : ptotalpages,//总页数
            curr : pindex,//当前页。
            skip : true,
            jump : function(obj, first) {

                $("#pindex").val(obj.curr);//设置当前页
                $("#psize").val($("#page_size").val())
                //防止无限刷新,
                //只有监听到的页面index 和当前页不一样是才出发分页查询
                if (obj.curr != pindex || psize != $("#psize").val()) {
                    document.f1.submit();
                }
            }
        });
    });
</script>

可能会遇到总页数为 1 的时候分页标签不显示,这个是layui里面的设定, layui 认为当总页数为1的时候,没有显示的必要.
如果要显示出来需要去修改 下图的文件
这里写图片描述

在里面寻找
t.pages<=1)return””
将 1 改成0 就好

  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值