樣式圖

引入資源

<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.min.js"></script>
<link type="text/css" rel="stylesheet"  href="<%=request.getContextPath() %>/css/page.css"/>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/bootstrap-paginator1.js"></script>
 

div樣式

<input type="hidden" id="pageNum1" value="${myData.newPage}"/>
<input type="hidden" id="pages1" value="${myData.allPage}"/>
<input type="hidden" id="total1" value="${myData.total}"/>
<div align="center">
	<div id="nav_list" style="height:30px;"></div> 
</div>
 

script

<script type="text/javascript">

var pageNum = $("#pageNum1").val();//當前頁
var pages = $("#pages1").val();//總頁數
var total = $("#total1").val();//一頁顯示的行數
//通用演算法，分頁導航欄
    $('#nav_list').bootstrapPaginator({
        currentPage: pageNum,
        totalPages: pages,
        numberOfPages:total,
        itemTexts: function (type, page, current) {
            switch (type) {
                case "first": return "首頁";
                case "prev": return "上一頁";
                case "next": return "下一頁";
                case "last": return "尾頁";
                case "page": return page;
            }
        },
        onPageClicked: function (event, originalEvent, type, page) {
        	var url = "../pcc/MDAR?page="+page;
        
            location.href=url;
        }
    });

</script>
 

分頁實體

package com.bw.data.portal.entity;

import java.util.List;

/**
 * 分頁實體類
 * */
@SuppressWarnings("rawtypes")
public class Page {
	private List rows;
	private long total;//條數 我sericeImpl 固定給死的 10 條
	private Long allPage;//總頁數
	private Integer newPage;//當前頁
	
	public Page(){}
	
	public Page(List rows, long total) {
		super();
		this.rows = rows;
		this.total = total;
	}

	public Long getAllPage() {
		return allPage;
	}

	public void setAllPage(Long allPage) {
		this.allPage = allPage;
	}

	public Integer getNewPage() {
		return newPage;
	}

	public void setNewPage(Integer newPage) {
		this.newPage = newPage;
	}

	public List getRows() {
		return rows;
	}
	public void setRows(List rows) {
		this.rows = rows;
	}
	public long getTotal() {
		return total;
	}
	public void setTotal(long total) {
		this.total = total;
	}

	@Override
	public String toString() {
		return "Page [rows=" + rows + ", total=" + total + "]";
	}
}

查詢基礎類 可用於實體類繼承

/**
 * 實體
 */
public class QueryPersonCenterInfo extends QueryBase{
	
	private String id;
	private String articleId;
	private String tableId;

}

package com.bw.data.portal.entity;

/*
* 類描述：查詢基礎類
* @auther wangmx
*/
public class QueryBase {

    /** 要排序的欄位名 */
    protected String sort;
    /** 排序方式: desc \ asc */
    protected String order = "";
    /** 獲取一頁行數 */
    protected int limit;
    /** 獲取的頁碼 */
    protected int page;
    /** 起始記錄 */
    protected int offset;

    public String getSort() {
        return sort;
    }

    public void setSort(String sort) {
        if(sort==null){
            return ;
        }
        String orderSort = "";
        for( int i = 0 ; i<sort.length(); i++ ){
            char a = sort.charAt(i);
            String b = ""+a;
            if( a>64 && a<91 ){ //大寫字母的ASCLL碼取值範圍
                if(orderSort.equals("")){
                    orderSort = orderSort + b.toLowerCase();
                }else{
                    orderSort = orderSort + "_" + b.toLowerCase();
                }
            }else{
                orderSort = orderSort + b;
            }
        }
        this.sort = orderSort;
    }


    public String getOrder() {
        return order;
    }

    public void setOrder(String order) {
        this.order = order;
    }

    public int getLimit() {
        return limit;
    }

    public void setLimit(int limit) {
        this.limit = limit;
    }

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getOffset() {
        return (this.page-1)*limit;
    }

    public void setOffset(int offset) {
        this.offset = offset;
    }
}

分頁資源下載路徑js css

csdn下載地址:https://download.csdn.net/download/xyjcfucdi128/10757125

githup下載地址：https://github.com/2224132867/bootStrop-bootstrap-paginator.js