对于后台管理系统,以前的分页展示是自己写的,
虽然有点丑,但是至少功能很好用,
最近在研究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 就好