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

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

阿新 • • 發佈：2018-12-10

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>

 

相關推薦

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

1. 效果 2. pagehelper版本的 2.1 引入相關jar 及配置分頁外掛    <!-- 10. 分頁 pageHelper -->             <depende

(轉)當使用Pagehelper進行分頁時頁數不在實際頁數之內依舊有資料返回

記錄一個Pagehelper的深坑 在使用Pagehelper寫程式時遇到一個問題，在資料很多的表裡使用這個分頁一開始是沒有問題的每頁的資料都能顯示，但是在資料比較少的表中使用Pagehelper進行分頁時就出問題了 不管頁碼超出多少一直都會返回資料，無論怎麼修改都不行 頭都大了，最後在

分頁外掛pagehelper初使用，前端傳遞當前頁碼與每頁條數後臺接受實現分頁

最新的專案用到了pagehelper分頁外掛，在此做下筆記方便以後檢視！同時也希望能對別人產生幫助。 1.因為專案是maven進行管理的，所以：第一步就是在pom.xml檔案中引入pagehelper分頁外掛。 <dependency> <groupId>com

mysql存儲過程嵌套循環並分頁處理數據

null 異常處理 != type arch else while exist bsp 業務背景：公司存證產品升級，隨著數據量的增加，存證產品線按業務分表，導致以往的存證關聯數據需要做數據同步更新。版本發布前，通過當前存儲過程解決數據升級問題。##創建存證文檔關聯情況下更

java redis 分頁查詢數據

dao datalist main stat pri .class print out -c package com.liying.tiger.test; import java.util.List; import org.springframework.c

jquery datatable 獲取當前分頁的數據

分頁 table 數據 裏的 current amp style ber bsp 　　使用jquery datatable 遇到分頁分別求和時，找了半天才找到獲取當前分頁數據的方法，以此總結 var table=$(‘#example‘).DataTable( {

NHibernte 4.0.3版本中，使用Queryover().Where().OrderBy().Skip().Take()方法分頁獲取數據失敗

osi ber modal str 問題 res tor 獲取數據 max 問題代碼如下： var result=repository.QueryOver<modal>() .Where(p=>p.Code==Code)

Handsontable的前端分頁與數據庫分頁

gof handle .text mage cati offset www. 一次 filter 　　Handsontable雖然處理速度很快，但當數據量達到10W+的時候很容易導致瀏覽器內存泄漏，這時候可以用分頁來解決。官網提供了前端分頁demo，測試後發現也只能處理低於

項目筆記：導出Excel功能分sheet頁插入數據

mkdir system getpara creates service posit ade quest mst 　　導出Excel功能分sheet頁處理數據： /*導出EXCEL*/ public void createExcel() { log.info("導

wordpress 修改默認分頁條數

技術 今天 導航 簡單 結果 分頁 class 沖突 mage 哎，終於快做完了，今天弄了弄分頁，真是網上扒的模板太高級了，把分頁和導航的css和js沖突了，終於解決了， 然後有一個模板是三和一排顯示的，其他的是單挑顯示的，它默認10條，我尋思改成9條，找了半天，尋思改改代

Elasticsearch 6.x 的分頁查詢數據

ef6 max div 6.2 info count clas table code { "size" :3, "query": { "match" : { "person_name" : "張老師"

源頭質量 PageHelper（分頁），導出功能

.get strong ktr try 一個 mms XP 密碼 return 今天星期五，本來想直接關電腦走人的，但想想自己弄出來的，寫寫留個記憶吧。兩個功能 導出 和 Mybatis的插件 PageHelper 分頁 一，導出功能代碼實現：這裏是需要jar包的啊 &l

第一個smarty例子－－分頁顯示數據

nbsp oca AS com tr1 xhtml 建立 xmlns set 模板頁index.tpl: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

Mybatis下collections使用pageHelper進行分頁

private ted 審核 status format 參數 import ast rtp pageHelper在對mybatis一對多分頁時造成查詢總頁數結果不對的情況。 可以做出如下修改： service層： public CommonResu

django 分頁函數

-c list paginator obj gen result clas ora == 實現類似: 上一頁 1 ... 4 5 6 7 8 ... 89 下一頁 的效果 def pageGenerate(fullList,pagenum,urltype,type,c

mysql分頁 和 mysql中利用編號id和每頁條數來進行分頁

1.mysql分頁 【語句順序】        select 選擇的列        from 表  

Python分頁轉Mybatis pagehelper格式分頁

最近工作裡遇到一個需求要把之前用Java寫的一個http介面替換成用Python寫的，出參是帶了mybatis pageHelper中PageInfo資訊的一個JSON串，而Python這邊分頁不會涉及到資料庫查詢，屬於直接對list進行分頁。。然後就有了下面的對開源Python分頁模組的一個改寫（模組地址：

PageHelper-----Mybatis分頁外掛

PageHelper的使用 1、pageHelper的maven依賴及外掛配置：com.github.pagehelper <dependency> <groupId>com.github.pagehelper</groupId&

com.github.pagehelper.PageInterceptor分頁外掛啟動失敗

本人剛接觸使用maven建立專案，在使用分頁外掛pageHelper報啟動失敗錯誤，上網搜了一個下午才找到原因，原來引入的分頁外掛如下：會報啟動失敗錯誤 <!-- 分頁處理引入包 --> <dependency> <groupId&

使用PageHelper實現分頁

在查詢分頁內容的查詢程式碼之前加：PageHelper.StartPage(pageNum, pageSize); 語句。查詢資料庫得到 List <T>之後，將該 list 封裝成 PageInfo PageInfo<T> pageInfo = ne