BootStrop--bootstrap-paginator.js 分頁 外掛 的使用
阿新 • • 發佈:2018-11-04
樣式圖
引入資源
<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