jstl+js+jsp 实现最简单的分页(附插件)

最新推荐文章于 2024-06-28 11:50:46 发布

xyl_ice

最新推荐文章于 2024-06-28 11:50:46 发布

阅读量5.6k

点赞数

分类专栏： javascript 文章标签： java-web jstl 分页

本文链接：https://blog.csdn.net/xyl_ice/article/details/70808952

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何利用jstl标签、JavaScript和jsp页面实现简单的分页效果。首先，通过jstl遍历列表并利用varStatus设置html元素的id。接着，设置分页工具条的位置，并引入jQuery分页插件，简化了处理大量页面的情况。通过这些步骤，实现了基于jsp的动态分页功能。

摘要由CSDN通过智能技术生成

实现原理：页面一加载注入的list，是jsp页面通过jstl标签进行遍历在html元素中，我则通过控制html元素来使得被遍历的数组内容选择性的隐藏和显示，来实现分页。

插件下载地址
http://download.csdn.net/detail/xyl_ice/9826599

第一步：jsp页面中需要导入core jstl和function jstl 和下文提到的jq分页插件

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

    <link rel="stylesheet" type="text/css" href="/css/paging.css">
    <script type="text/javascript" src="/js/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="/js/query.js"></script>
    <script type="text/javascript" src="/js/paging.js"></script>

第二步：head中写如下方法

<script type="text/javascript">
        function change(page) {
            <c:set var="totalPage" value="${fn:length(List)}" scope="session"/>
            <c:set var="perPage" value="2" scope="session"/>
            var begin =${perPage}*(page - 1);
            var end =${perPage}*(page - 1) + ${perPage}-1;
            for (var i = 0; i < (${totalPage}); i++) {
                if (i >= begin && i <= end) {
                    document.getElementById(i).style.display = "block";
                } else {
                    document.getElementById(i).style.display = "none";
                }
            }
        }
    </script>

第三步：找到想被分页的list集合，也就是下面想被分页的jstl中foreach遍历的集合,并且在foreach标签中使用varStatus定义一个变量 i 将html元素的id设置为这个变量 i
(我所给的示例代码中使用的是dl 同理 div，table都可以，根据自己需求进行修改)

<c:if test="${!empty List}">
            <c:forEach var="list" items="${List}" varStatus="i">

                <dl id="${i.index}">
                    <!-- 省略中间遍历取值代码块-->
                </dl>
            </c:forEach>
</c:if>

第四步：设置工具条所展示的位置

<div id="pageTool" class="pages"></div>

第五步：导入工具条（说明：这里我下载了个jq的分页插件，因为自己写还需要写当页数过多变成。。。等问题，就没有自己写，直接使用的插件），是一段jq的方法

<script>
    $('#pageTool').Paging({
        pagesize:${perPage}, count:${totalPage}, callback: function (page) {
            change(page);
        }
    });
</script>

到这里简单的用 js+jstl+jsp就实现分页功能了，谢谢先辈提供的jq分页插件

–声明，本人小白，如有不对，请及时提出，如有版权问题，及时告知，本人将删除此博文，谢谢大家观看。