1. 程式人生 > >jstl+js+jsp 實現最簡單的分頁(附外掛)

jstl+js+jsp 實現最簡單的分頁(附外掛)

實現原理:頁面一載入注入的list,是jsp頁面通過jstl標籤進行遍歷在html元素中,我則通過控制html元素來使得被遍歷的陣列內容選擇性的隱藏和顯示,來實現分頁。

第一步: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分頁外掛

–宣告,本人小白,如有不對,請及時提出,如有版權問題,及時告知,本人將刪除此博文,謝謝大家觀看。