JavaEE之--使用分页组件进行数据分页

最新推荐文章于 2021-03-10 02:47:57 发布

咣咣咣.

最新推荐文章于 2021-03-10 02:47:57 发布

阅读量516

点赞数 5

分类专栏： JavaWeb 文章标签： java html java后端

本文链接：https://blog.csdn.net/qq_44779506/article/details/89441601

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在后端开发中,经常需要对页面进行分页使得界面更加整洁规整,便于用户进行数据的查找,为了更加方便的对数据进行分页,需要使用分页标签库组件,在lib目录中导入此包:
在这里插入图片描述
以一个使用了分页标签库的简单的jsp页面进行示例:

<%@taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--items:数据总记录数;maxPageItems:每页最大显示数;--%>
<pg:pager url="/TestTaglib.jsp" items="1000" maxPageItems="20" >

<pg:first>
    <a href="${pageUrl}">首页</a>
</pg:first>

<pg:prev>
    <a href="${pageUrl}">上页</a>
</pg:prev>

<%--设置数字页码--%>
    <pg:pages>
        <a href="${pageUrl}">${pageNumber}</a>
    </c:if>
    </pg:pages>

<pg:next>
    <a href="${pageUrl}">下页</a>
</pg:next>

<pg:last>
    <a href="${pageUrl}">尾页</a>
</pg:last>
</pg:pager>
</body>
</html>

显示结果:
在这里插入图片描述

观察地址栏后参数pager.offset,每当进行换页操作时,pager.offset便按照用户设定好的每页显示数(maxPageItesm)进行增减后传入服务端中以实现对数据表按照设定好的分页规则在页面中分页显示。
上述代码存在一处问题：当用户处在第5页时，此时用户仍可点击“5”进入到第5页，对此情况进行优化，优化后当用户处在某一页面时，将该页面页码数字将不再能被点击。
优化后代码：

<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<%--items:数据总记录数;maxPageItems:每页最大显示数;--%>
<%-- export="currentPageNumber=pageNumber"：设一个变量currentPageNumber代表当前内容页的页码数字，将组件内的pageNumber（页码数字,随着页码的改变而改变，与地址栏参数pager.offset关联）值赋给定义的变量，以便于后续进行比较操作。--%>
<pg:pager url="/TestTaglib.jsp" items="1000" maxPageItems="20" export="currentPageNumber=pageNumber">

<pg:first>
    <a href="${pageUrl}">首页</a>
</pg:first>

<pg:prev>
    <a href="${pageUrl}">上页</a>
</pg:prev>

    <pg:pages>
    <%-- 若当前内容页页码数与组件中存放的页码数pageNumber相同，则页面只将该页码数显示出来，不能进行点击 --%>
    <c:if test="${currentPageNumber eq pageNumber}">
        ${pageNumber}
    </c:if>
    <c:if test="${currentPageNumber != pageNumber}">
        <a href="${pageUrl}">${pageNumber}</a>
    </c:if>
    </pg:pages>

<pg:next>
    <a href="${pageUrl}">下页</a>
</pg:next>

<pg:last>
    <a href="${pageUrl}">尾页</a>
</pg:last>
</pg:pager>
</body>
</html>

注意：地址栏后的pager.offset为在当前页面时该参数的值，而当鼠标放到上页、首页、下页、尾页或者数字上时此时浏览器左下角会如下显示：在这里插入图片描述
此时鼠标放在“下页”，此时左下角显示的为点击后pager.offset参数值将作何变化，从而跳转到点击到的页码。所以在分页组件中，正是依赖于pager.offset参数这种动态的变化，实现分页操作，而上述组件中的pageNumber也依赖于pager.offset的增减而进行改变(pager.offset/maxPageItems + 1）从而实现面对不同分页需求时所需进行的逻辑操作。