1. 程式人生 > >203. 使用pageHelper+boostrap分頁 頁數過多使用....代替

203. 使用pageHelper+boostrap分頁 頁數過多使用....代替

1. 效果

2. pagehelper版本的

2.1 引入相關jar 及配置分頁外掛

   <!-- 10. 分頁 pageHelper -->
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper</artifactId>
                <version>4.1.4</version>
            </dependency>  

 <!-- 3.3 配置分頁外掛 -->
                 <property name="plugins">
                    <array>
                      <bean class="com.github.pagehelper.PageHelper">
                        <property name="properties">
                          <value>
                            dialect=mysql
                            reasonable=true
                          </value>
                        </property>
                      </bean>
                    </array>
                  </property>

2.2 後臺

2.2.1 controller

2.2.2 業務層

2.2.3 mapper

2.3 前端分頁(*)

目的:過多的情況下用"......"代替

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>系統登入日誌</title>
    <%@ include file="../public/url.jsp" %>
    <!--1.入門meta部分   為了確保適當的繪製和觸屏縮放,需要在 <head> 之中新增 viewport 元資料標籤。-->
            <!--initial-scale=1  是為了保證頁面是流動式頁面   user-scalable=no 禁止頁面縮放功能-->
          <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--2.引入 bootstrap.min.css-->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <!--3.引入jQuery庫   必須在bootstrap庫之前   建議使用1.x版本的-->
        <script src="js/jquery-2.1.4.min.js"></script>
        <!--4.引入bootstrap庫-->
        <script src="js/bootstrap.min.js"></script>
        
        <script type="text/javascript">
        //1.分頁 將原來的get提交給位post提交
                function pageTo(pageNum){
                    document.write("<form action='${pageContext.request.contextPath }/pageHelperFunction.action' method=post name=manageDepForm style='display:none'>");
                    document.write("<input type=hidden name='currentPage' value='"+pageNum+"'/>");//引數1
                    document.write("<input type=hidden name='pageSize' value='"+data.pageSize+"'/>");//引數2
                    document.write("</form>");
                    document.manageDepForm.submit(); 
            }


        </script>

</head>
<body>
        <!--3. 顯示資訊  -->
    <table class="table table-bordered">
        <thead>
            <tr align="center" style="color: black;">
                <td> <strong>序號</strong></td>
                <td> <strong>操作賬號</strong></td>
                <td> <strong>操作人</strong></td>
                <td> <strong>管理員</strong></td>
                <td> <strong>IP</strong></td>
                <td> <strong>IP歸屬地</strong></td>
                <td> <strong>網路運營商</strong></td>
                <td> <strong>訪問途徑</strong></td>
                <td> <strong>瀏覽器型別</strong></td>
                <td> <strong>作業系統</strong></td>
                <td> <strong>登入時間</strong></td>
                <td><strong>狀態</strong></td>
                
            </tr>
            <tbody>
                <c:forEach var="logs" items="${pb.list }"  varStatus="status">
                        <td align="center">${pb.pageSize * (pb.pageNum - 1) + status.count}</td>
                        <td align="center"> admin</td>
                        <td align="center"><font style="color: red">admin</font></td>
                        <td align="center">
                        <c:if test="${logs.isadmin =='0'}">
                                                        是
                                </c:if>
                                <c:if test="${logs.isadmin =='1'}">
                                                        否
                                </c:if>
                        </td>
                        <td align="center">${logs.ip}</td>
                        <td align="center">${logs.city}</td>
                        <td align="center">${logs.isp}</td>
                        <td align="center">${logs.visitType}</td>
                        <td align="center">${logs.browser}</td>
                        <td align="center">${logs.operation}</td>
                        <td align="center">${logs.createTime}</td>
                        <td align="center">
                            <c:if test="${logs.abnormalFlag==0 }">
                                <a href="javascript:updateDataStatus('${logs.id}',1,'${logs.isadmin }')" class="btn-success btn-sm">正常</a>
                            </c:if>
                            <c:if test="${logs.abnormalFlag==1 }">
                                <a href="javascript:updateDataStatus('${logs.id}',0,'${logs.isadmin }')" class="btn btn-danger btn-sm">異常</a>
                            </c:if>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </thead>
    </table>
    <!--  -->
    <font size="5px">共計為您搜尋到:${pb.total }條資料;每頁顯示:${pb.pageSize }條;共${pb.pages }頁;當前是第</font>
    <font style="color: red" size="5px">${pb.pageNum}</font><font size="5px">頁</font>;
            <!-- 分頁開始=======================        -->
                        <div style="height: 400px;">
                             <ul class="pagination">
                            
                                <!-- 上一頁  -->
                                <!-- 噹噹前頁碼為1時,隱藏上一頁按鈕  -->
                                <li <c:if test="${pb.pageNum==1 }">class="disabled"</c:if>>
                                <!-- 噹噹前頁碼不等於1時,跳轉到上一頁  -->
                                    <a 
                                    <c:if test="${pb.pageNum==1 }">href="javaScript:void(0)"</c:if>
                                    <c:if test="${pb.pageNum!=1 }">href="javaScript:pageTo('${pb.pageNum-1 }')"</c:if>
                                    >上一頁</a>
                                </li>
                                
                                <!-- 頁碼  -->
                                <!-- 當總頁數小於等於7時,顯示頁碼1...7頁 -->
                                <c:if test="${pb.pages<=7}">
                                    <c:forEach begin="1" end="${pb.pages}" var="i">
                                        <li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
                                            <a
                                            href="javaScript:pageTo('${i}')">${i}</a>
                                        </li>
                                    </c:forEach>
                                </c:if>
                                <!-- 當總頁數大於7時 -->
                                <c:if test="${pb.pages>7}">
                                    <!-- 當前頁數小於等於4時,顯示1到5...最後一頁 -->
                                    <c:if test="${pb.pageNum<=4}">
                                        <c:forEach begin="1" end="5" var="i">
                                            <li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
                                                <a
                                                href="javaScript:pageTo('${i}')">${i}</a>
                                            </li>
                                        </c:forEach>
                                        <li><a href="#">...</a></li>
                                        <li
                                            <c:if test="${pb.pageNum==pb.pages }">class="active"</c:if>>
                                            <a
                                            href="javaScript:pageTo('${pb.pages}')">${pb.pages}</a>
                                        </li>
                                    </c:if>
                                    <!-- 當前頁數大於4時,如果當前頁小於總頁碼書-3,則顯示1...n-1,n,n+1...最後一頁 -->
                                    <c:if test="${pb.pageNum>4}">
                                        <c:if test="${pb.pageNum<pb.pages-3}">
                                            <li><a
                                                href="javaScript:pageTo('${1}')">${1}</a>
                                            </li>
                                            <li><a href="#">...</a></li>
                                            <c:forEach begin="${pb.pageNum-1 }" end="${pb.pageNum+1 }"
                                                var="i">
                                                <li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
                                                    <a
                                                    href="javaScript:pageTo('${i}')">${i}</a>
                                                </li>
                                            </c:forEach>
                                            <li><a href="#">...</a></li>
                                            <li
                                                <c:if test="${pb.pageNum==pb.pages }">class="active"</c:if>>
                                                <a
                                                href="javaScript:pageTo('${pb.pages}')">${pb.pages}</a>
                                            </li>
                                        </c:if>
                                    </c:if>
                                    <!-- 當前頁數大於4時,如果當前頁大於總頁碼書-4,則顯示1...最後一頁-3,最後一頁-2,最後一頁-1,最後一頁 -->
                                    <c:if test="${pb.pageNum>pb.pages-4}">
                                        <li><a
                                            href="javaScript:pageTo('${1}')">${1}</a>
                                        </li>
    
                                        <li><a href="#">...</a></li>
                                        <c:forEach begin="${pb.pages-3 }"
                                            end="${pb.pages }" var="i">
                                            <li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
                                                <a
                                                href="javaScript:pageTo('${i}')">${i}</a>
                                            </li>
                                        </c:forEach>
                                    </c:if>
                                </c:if>
                                <!-- 下一頁  -->
                                <!-- 噹噹前頁碼為最後一頁或者最後一頁為0時,隱藏下一頁按鈕
                                                           噹噹前頁碼不等於總頁碼時,跳轉下一頁  -->
                                <li
                                    <c:if test="${pb.pageNum==pb.pages || pb.pages==0}">class="disabled"</c:if>>
                                    <a
                                    <c:if test="${pb.pageNum==pb.pages || pb.pages==0 }">href="javaScript:void(0)"</c:if>
                                    <c:if test="${pb.pageNum!=pb.pages }">href="javaScript:pageTo('${pb.pageNum+1 }')"</c:if>>下一頁</a>
                                </li>
                            </ul>
                            
                            <!-- 跳轉頁 -->
                          <%--   <div class="jump">
                                <span class="jump_text">共有${pb.pages }頁,${totalElements }條記錄,跳到
                                    <input type="text" name="jumpPage"
                                    id="jumpPage"
                                    onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');">頁
                                    <button type="button" class="btn btn-primary btn-xs"
                                        onclick="goPage()">GO</button>
                                </span>
                            </div> --%>
    
                        <div style="clear: both;"></div>
            
                    </div>
            <!-- 分頁結束=======================        -->

</body>
</html>