漂亮的layui 分页展示

对于后台管理系统,以前的分页展示是自己写的,这里写图片描述
虽然有点丑,但是至少功能很好用,
最近在研究layui,无意间发现它的分页标签很漂亮,废话不多说,先展示给大家看看
漂亮的layui 分页展示_第1张图片
下面直接贴上代码,
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的时候,没有显示的必要.
如果要显示出来需要去修改 下图的文件
漂亮的layui 分页展示_第2张图片

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

你可能感兴趣的:(javaWeb)