版权声明：此文章为许诗宇所写，如需转载，请写下转载文章的地址 https://blog.csdn.net/xushiyu1996818/article/details/83656610
这个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