後端分頁外掛 pageBar
阿新 • • 發佈：2018-11-13
這個pagebar工具，是我在網上找到兩個分頁外掛，合併修改而成的
下載地址為
https://gitee.com/xushiyu/java_web_tools/tree/master/src/javaweb/pagebar
首先本外掛共分三個部分，PageBar.java PageBar.jsp PageBar.css
java檔案是一個java類，封裝了記錄的總條數，當前頁，每頁條數，返回的結果等等東西，後端將pagebar返回到前端（命名為pb），讓前端進行呼叫
jsp檔案是一個封裝了分頁的js，input域，分頁顯示12345的html 的東西。該jsp根據後端返回的pagebar（命名為pb），顯示分頁的欄目顯示多少。該jsp需要jquery和pageBar.css,通過<%@ include file="/views/util/pageBar.jsp" %>呼叫
css檔案是jsp檔案用到的css的集合，是bootstrap3的分頁css和浮動的集合，因為可能css命名衝突，所以下載到本地變為一個額外的css檔案，並改變了css的class的命名
java檔案
package javaweb.pagebar; import java.util.ArrayList; import java.util.List; import java.util.Map; //這個pagebar放到頁面時命名為pb，與pagebar.jsp對應 public class PageBar { private int totalPageNum=0;//共有頁面數目 private int currentPageNum=1;//當前需要現實的頁面數目 private int everyPageNum = 10;//每頁顯示資料的條數 private int totalNum=0;//共有資料數目 private List resultList = new ArrayList();//結果集 private Map<String,String> paraMap=null;//引數列表 private List otherList=null;//其他的返回結果和引數，留待備用 private Object otherPara=null;//其他的引數，留待備用 public int getCurrentPageNum() { return currentPageNum; } public void setCurrentPageNum(String currentPageNum) { if(null==currentPageNum||"".equals(currentPageNum))currentPageNum="1"; this.currentPageNum = Integer.parseInt(currentPageNum); } public int getEveryPageNum() { return everyPageNum; } public void setEveryPageNum(String everyPageNum) { if(null==everyPageNum||"".equals(everyPageNum))everyPageNum="10"; this.everyPageNum = Integer.parseInt(everyPageNum);; } public List getResultList() { return resultList; } public void setResultList(List resultList) { this.resultList = resultList; } public int getTotalPageNum() { return totalPageNum; } public void setTotalPageNum(int totalPageNum) { this.totalPageNum = totalPageNum; } //獲得所有的條目後呼叫該方法 public void buildPage(int allNum){ this.setTotalNum(allNum); totalPageNum = allNum/everyPageNum<(double)allNum/everyPageNum?((allNum/everyPageNum)+1):allNum/everyPageNum; } public int getTotalNum() { return totalNum; } public void setTotalNum(int totalNum) { this.totalNum = totalNum; } public List getOtherList() { return otherList; } public void setOtherList(List otherList) { this.otherList = otherList; } public Map<String, String> getParaMap() { return paraMap; } public void setParaMap(Map<String, String> paraMap) { this.paraMap = paraMap; } public Object getOtherPara() { return otherPara; } public void setOtherPara(Object otherPara) { this.otherPara = otherPara; } @Override public String toString() { return "PageBar [totalPageNum=" + totalPageNum + ", currentPageNum=" + currentPageNum + ", everyPageNum=" + everyPageNum + ", totalNum=" + totalNum + ", resultList=" + resultList + ", paraMap=" + paraMap + ", otherList=" + otherList + ", otherPara=" + otherPara + "]"; } }
使用時，先設定everyPageNum（預設為10），再設定currentPageNum（預設為1）。
再select count 得到總條數，再呼叫buildPage（allNum）方法，會自動設定總條數和總頁數
如果需要的話，可以用setParaMap，放置查詢的引數
最後setResultList，放置一個list的結果列表。
最後把這個pageBar命名為pb放到request中，讓頁面和jsp檔案呼叫
jsp檔案
<%@ page contentType="text/html; charset=UTF-8"%> <!-- 包含此頁的jsp的contentType 也要和這個的一樣--> <!-- 隱藏欄位 每頁數目和當前頁數 ,值在pb中，如果沒有，則當前頁設為1，每頁條數為10--> <input type="hidden" id="everyPageNum" name="everyPageNum" value="${pb.everyPageNum}"/> <input type="hidden" id="currentPageNum" name="currentPageNum" value="${pb.currentPageNum}"/> <!-- 使用自己從bootstrap抽取的css框架pageBar和jquery框架 --> <!-- 注意這兩個的引用和位置 ,以及這個jsp引用的位置--> <!-- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> --> <link href="${pageContext.request.contextPath}/views/util/pageBar.css" rel="stylesheet"> <script type="text/javascript"> //初始化 window.onload=function() { var val=document.getElementById("currentPageNum").value; if(val==undefined) { document.getElementById("currentPageNum").value=1; } var val=document.getElementById("everyPageNum").value; if(val==undefined) { document.getElementById("everyPageNum").value=10; } var currentPage=Number("${pb.currentPageNum}"); var pageNum=Number("${pb.totalPageNum}"); $("#page_btn2").text(currentPage-2); $("#page_btn3").text(currentPage-1); $("#page_btn4").text(currentPage); $("#page_btn5").text(currentPage+1); $("#page_btn6").text(currentPage+2); $("#page_btn7").text(pageNum); /* $("#page_btn4").css("background-color","#4f90fb"); $("#page_btn4").css("border","1px solid #ddd"); $("#page_btn4").css("color","#fff"); */ if(currentPage==1) { $("#prePage").hide(); } if(currentPage==pageNum) { $("#sufPage").hide(); } if(currentPage<=3){ $("#prePoint").hide(); $("#page_btn1").hide(); } else if(currentPage==4){ $("#prePoint").hide(); } if(currentPage==1) { $("#page_btn2").hide(); $("#page_btn3").hide(); } else if(currentPage==2) { $("#page_btn2").hide(); } if(currentPage>=pageNum-2){ $("#sufPoint").hide(); $("#page_btn7").hide(); } else if(currentPage==pageNum-3){ $("#sufPoint").hide(); } if(currentPage==pageNum) { $("#page_btn5").hide(); $("#page_btn6").hide(); } if(currentPage==pageNum-1) { $("#page_btn6").hide(); } }; //需要自己寫一個searchDataPage()函式，來做其餘真正查詢的事情 //第一次查詢的時候的函式 function SearchDataInit() { //設定初始頁碼為1 document.getElementById("currentPageNum").value="1"; searchDataPage(); } //點選上一頁，下一頁，或某一頁 function thPagebar(){ var ctpn=$("#currentPageNum").attr("value")*1; if(arguments[0]=='+'){ ctpn++; }else if(arguments[0]=='-'){ ctpn--; }else if(arguments[0]=='1'){ ctpn=1; }else if(arguments[0]=='e'){ ctpn='${pb.totalPageNum}'; }else{ ctpn=arguments[0]; } $("#currentPageNum").attr("value",ctpn); searchDataPage(); } //跳轉到某頁 function goToPage(){ var topage=$('#topage').val(); var rule = /^[0-9]+$/; if(!rule.test(topage)){ alert("請輸入正整數"); return false; }; var tp=${pb.totalPageNum}; if($("#topage").val()*1>tp){ alert("不允許超過最大頁數");return; } thPagebar($("#topage").val()); } </script> <!-- 這兩個的css在pageBar這個css內,原來是bootstrap的pagination，為了防止衝突--> <div class="pull-right" > <ul class="pageBar pull-right"> <li> <a id="prePage" href="javascript:thPagebar('-')">上頁</a> </li> <li> <a id="page_btn1" href="javascript:thPagebar('1')">1</a> </li> <li> <a id="prePoint" href="#">...</a> </li> <li> <a id="page_btn2" href="javascript:thPagebar('${pb.currentPageNum-2 }')"></a> </li> <li> <a id="page_btn3" href="javascript:thPagebar('${pb.currentPageNum-1 }')" ></a> </li> <li class="active"> <a id="page_btn4" href="#"></a> </li> <li> <a id="page_btn5" href="javascript:thPagebar('${pb.currentPageNum+1 })"></a> </li> <li> <a id="page_btn6" href="javascript:thPagebar('${pb.currentPageNum+2 }')"></a> </li> <li> <a id="sufPoint" href="#">...</a> </li> <li> <a id="page_btn7" href="javascript:thPagebar('e')"></a> </li> <li> <a id="sufPage" href="javascript:thPagebar('+')">下頁</a> </li> <!-- 想要顯示當前頁，總共幾頁，總共幾條資料，每頁顯示幾條可以取消註釋 --> <%-- <li>[${pb.currentPageNum}/${pb.totalPageNum}] </li> 共有${pb.totalNum}條資料 <li> --%> <%-- <li> 每頁顯示${pb.everyPageNum}條資料 </li> --%> <input type='text' style="width:50px" value="" id="topage"/> <input type='button' value='跳轉' onclick="goToPage()" class='btn'/> </ul> </div>
jsp檔案在需要的位置，<%@ include file="/views/util/pageBar.jsp" %>，這一行放進去即可。
注意：
1 如果提交的是個表單，這一句放在form內
2 注意引用jsp的位置
3 在引用它的頁面用pb.resultlist 抓取資料
如<c:forEach items="${pb.resultList }" var="product" >
jsp檔案會顯示 這一行
然後包括顯示具體哪些數字的js檔案，點選數字，下一頁，跳轉的js函式
使用時，要在頁面內寫一個searchDataPage();函式
跳轉的最後會呼叫這個方法，執行真正的查詢
函式內可以這樣寫，也可以直接用js提交表單
function searchDataPage() {
var currentPageNum=$("#currentPageNum").val();
var url="${pageContext.request.contextPath}/admin/showCanSellProductsAjax.do?currentPageNum="+currentPageNum;
window.location.href=url;
}
var form = document.getElementById('search_form');
form.submit();css檔案
/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/*這個css是從bootstrap 3.3.7提取出來的,這裡的pagebar 在原來是pagination*/
.pageBar{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}
.pageBar>li{display:inline}
.pageBar>li>a,.pageBar>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}
.pageBar>li:first-child>a,.pageBar>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}
.pageBar>li:last-child>a,.pageBar>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}
.pageBar>li>a:focus,.pageBar>li>a:hover,.pageBar>li>span:focus,.pageBar>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}
.pageBar>.active>a,.pageBar>.active>a:focus,.pageBar>.active>a:hover,.pageBar>.active>span,.pageBar>.active>span:focus,.pageBar>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}
.pageBar>.disabled>a,.pageBar>.disabled>a:focus,.pageBar>.disabled>a:hover,.pageBar>.disabled>span,.pageBar>.disabled>span:focus,.pageBar>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pageBar-lg>li>a,.pageBar-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}
.pageBar-lg>li:first-child>a,.pageBar-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}
.pageBar-lg>li:last-child>a,.pageBar-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}
.pageBar-sm>li>a,.pageBar-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}
.pageBar-sm>li:first-child>a,.pageBar-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}
.pageBar-sm>li:last-child>a,.pageBar-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}
.pull-right{float:right!important}
.pull-left{float:left!important}css檔案是jsp檔案用到的css的集合，是bootstrap3的分頁css和浮動的集合，因為可能css命名衝突，所以下載到本地變為一個額外的css檔案，並改變了css的class的命名
需要時可以修改css，並且修改jsp內用的class