分頁
分頁大家都知道有邏輯分頁和物理分頁,邏輯分頁:即將資訊全部查詢出來,然後通過程式碼去進去分頁,並不是依賴於SQL。物理分頁: 即SQL中採用了limit 關鍵字來進行分頁。小菜鳥使用的一般當然就是物理分頁了,limit直接使用多簡單。 為什麼要寫這篇部落格呢,一是因為分頁也是公司中常用的技術點之一,二是上星期公司中的一個專案中的分頁有問題,那個專案是外包出去一段時間然後拿回來的,剛好分頁是別人寫的,那個程式碼寫的(大家懂得),只好自己再改一遍。所以想了想還是寫篇部落格記錄下來,以後有類似的問題也可以直接拿來使用。
分頁中最重要的就是五要素了,我叫它分頁五要素,其中包括當前頁數(currentPage),總頁數(totalPage),總記錄數(totalResult),當前頁中顯示的記錄數(showCount),當前頁中顯示的資料(list)。 先說說物理分頁吧,物理分頁採用limit,當然了兩種分頁各有千秋,在此我就不多說了。limit 2,4 就是從3 開始查詢,查詢4條資料。因為其是從0開始的,所以是不包含頭的。這裡主要講的是邏輯分頁,邏輯分頁,先查詢出所有的資料,然後使用程式碼將其進行分頁操作,話不多說,先上程式碼:
package com.cn.platform.common.page;
import java.util.Map;
public class Page {
private int showCount = 10; // 每頁顯示記錄數
private int totalPage; // 總頁數
private int totalResult; // 總記錄數
private int currentPage; // 當前頁
private int currentResult; // 當前記錄起始索引
private boolean entityOrField; // true:需要分頁的地方,傳入的引數就是Page實體;false:需要分頁的地方,傳入的引數所代表的實體擁有Page屬性
private String pageStr; // 最終頁面顯示的底部翻頁導航,詳細見:getPageStr();
private String orderColunm;// 排序條件
private String orderMode;// 排序方式
private Map<String, Object> queryParam;
public int getTotalPage() {
if (totalResult % showCount == 0) {
if (totalResult == 0) {
totalPage = 1;
} else {
totalPage = totalResult / showCount;
}
} else {
totalPage = totalResult / showCount + 1;
}
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getTotalResult() {
return totalResult;
}
public void setTotalResult(int totalResult) {
this.totalResult = totalResult;
}
public int getCurrentPage() {
if (currentPage <= 0)
currentPage = 1;
if (currentPage > getTotalPage())
currentPage = getTotalPage();
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public String getPageStr() {
StringBuffer sb = new StringBuffer();
if (totalResult > 0) {
sb.append(" <ul>\n");
if (currentPage == 1) {
sb.append(" <li class=\"pageinfo\">首頁</li>\n");
sb.append(" <li class=\"pageinfo\">上頁</li>\n");
} else {
sb.append(" <li><a href=\"#@\" onclick=\"nextPage(1)\">首頁</a></li>\n");
sb.append(" <li><a href=\"#@\" onclick=\"nextPage(" + (currentPage - 1) + ")\">上頁</a></li>\n");
}
int showTag = 3; // 分頁標籤顯示數量
int startTag = 1;
if (currentPage > showTag) {
startTag = currentPage - 1;
}
int endTag = startTag + showTag - 1;
for (int i = startTag; i <= totalPage && i <= endTag; i++) {
if (currentPage == i)
sb.append("<li class=\"current\">" + i + "</li>\n");
else
sb.append(" <li><a href=\"#@\" onclick=\"nextPage(" + i + ")\">" + i + "</a></li>\n");
}
if (currentPage == totalPage) {
sb.append(" <li class=\"pageinfo\">下頁</li>\n");
sb.append(" <li class=\"pageinfo\">尾頁</li>\n");
} else {
sb.append(" <li><a href=\"#@\" onclick=\"nextPage(" + (currentPage + 1) + ")\">下頁</a></li>\n");
sb.append(" <li><a href=\"#@\" onclick=\"nextPage(" + totalPage + ")\">尾頁</a></li>\n");
}
sb.append(" <li class=\"pageinfo\">第" + currentPage + "頁</li>\n");
sb.append(" <li class=\"pageinfo\">共" + totalPage + "頁</li>\n");
sb.append("</ul>\n");
sb.append("<script type=\"text/javascript\">\n");
sb.append("function nextPage(page){");
sb.append(" if(true && document.forms[0]){\n");
sb.append(" var url = document.forms[0].getAttribute(\"action\");\n");
sb.append(" if(url.indexOf('?')>-1){url += \"&" + (entityOrField ? "currentPage" : "page.currentPage") + "=\";}\n");
sb.append(" else{url += \"?" + (entityOrField ? "currentPage" : "page.currentPage") + "=\";}\n");
sb.append(" document.forms[0].action = url+page;\n");
sb.append(" document.forms[0].submit();\n");
sb.append(" }else{\n");
sb.append(" var url = document.location+'';\n");
sb.append(" if(url.indexOf('?')>-1){\n");
sb.append(" if(url.indexOf('currentPage')>-1){\n");
sb.append(" var reg = /currentPage=\\d*/g;\n");
sb.append(" url = url.replace(reg,'currentPage=');\n");
sb.append(" }else{\n");
sb.append(" url += \"&" + (entityOrField ? "currentPage" : "page.currentPage") + "=\";\n");
sb.append(" }\n");
sb.append(" }else{url += \"?" + (entityOrField ? "currentPage" : "page.currentPage") + "=\";}\n");
sb.append(" document.location = url + page;\n");
sb.append(" }\n");
sb.append("}\n");
sb.append("</script>\n");
}
pageStr = sb.toString();
return pageStr;
}
public void setPageStr(String pageStr) {
this.pageStr = pageStr;
}
public int getShowCount() {
return showCount;
}
public void setShowCount(int showCount) {
this.showCount = showCount;
}
public int getCurrentResult() {
currentResult = (getCurrentPage() - 1) * getShowCount();
if (currentResult < 0)
currentResult = 0;
return currentResult;
}
public void setCurrentResult(int currentResult) {
this.currentResult = currentResult;
}
public boolean isEntityOrField() {
return entityOrField;
}
public void setEntityOrField(boolean entityOrField) {
this.entityOrField = entityOrField;
}
public String getOrderColunm() {
return orderColunm;
}
public void setOrderColunm(String orderColunm) {
this.orderColunm = orderColunm;
}
public String getOrderMode() {
return orderMode;
}
public void setOrderMode(String orderMode) {
this.orderMode = orderMode;
}
public Map<String, Object> getQueryParam() {
return queryParam;
}
public void setQueryParam(Map<String, Object> queryParam) {
this.queryParam = queryParam;
}
public void setPageMessage(Page page,String orderColunm,String orderMode) {
int totalPage = 0;
if (page.getTotalResult() != 0 ) {
if (page.getTotalResult()%page.getShowCount() > 0) {
totalPage = page.getTotalResult()/page.getShowCount() + 1;
}else{
totalPage = page.getTotalResult()/page.getShowCount();
}
page.setTotalPage(totalPage);
}
page.setOrderColunm(orderColunm);
page.setOrderMode(orderMode);
}
}
/**
* 分頁連結HTML
*/
function splitPageHtml2(divId, formId, totalRow, pageSize, pageNumber, totalPages, isSelectPage, isSelectSize, orderColunm, orderMode){
var splitStr = '<div class="sub_pages centers jushang">';
splitStr += '<div class="lefts">每頁 <b>'+pageSize+'</b> 條 共 <b>'+totalRow+'</b>條記錄 頁碼:<b>'+pageNumber+'</b> / <b>'+totalPages+'</b></div>';
splitStr+='<div class="rights">';
if (pageNumber == 1 || totalPages == 0) {
//首頁
splitStr += '<span class="sub_pages_item radiuss4"><i class="icon-double-angle-left left_sub right_sub"><a href="javascript:void(0)"></a></i></span>';
} else {
//上一頁
splitStr += '<span class="sub_pages_item radiuss4" onclick="javascript:splitPageLink(\''+divId+'\', \''+formId+'\', 1);"><i class="icon-double-angle-left left_sub right_sub"></i></span>';
}
if (pageNumber == 1 || totalPages == 0) {
//尾頁
splitStr += '<span class="sub_pages_item radiuss4"><i class="icon-angle-left left_sub right_sub"><a href="javascript:void(0)"></a></i></span>';
} else {
//下一頁
splitStr += '<span class="sub_pages_item radiuss4" onclick="javascript:splitPageLink(\''+divId+'\', \''+formId+'\', ' + (pageNumber - 1) + ');"><i class="icon-angle-left left_sub right_sub"></i></span>';
}
for (var i = 1; i <= totalPages; i++) {
if (i == 2 && pageNumber - 4 > 1) {
// splitStr += '<li><a href="javascript:void(0)">...</a></li>';
splitStr += '...';
i = pageNumber - 4;
} else if (i == pageNumber + 4 && pageNumber + 4 < totalPages) {
// splitStr += '<li><a href="javascript:void(0)">...</a></li>';
splitStr += '...';
i = totalPages - 1;
} else {
if (pageNumber == i) {
// splitStr += '<li class="active"><a href="javascript:void(0)" style="color: #272727; font-size: 14px; text-decoration: none;">' + pageNumber + '</a></li>';
splitStr += '<span class="sub_pages_item sub_pages_item_num radiuss4 spi_on"><a href="javascript:void(0)">' + pageNumber + '</a></span>';
} else {
// splitStr += '<li><a href="javascript:splitPageLink(\''+divId+'\', \''+formId+'\', ' + i + ');" style="color: #898989; font-size: 14px;">';
// splitStr += i;
// splitStr += '</a></li>';
splitStr += '<span class="sub_pages_item sub_pages_item_num radiuss4" onclick="javascript:splitPageLink(\''+divId+'\', \''+formId+'\', ' + i + ');"><a href="javascript:splitPageLink(\''+divId+'\', \''+formId+'\', ' + i + ');">';
splitStr += i;
splitStr += '</a></span>';
}
}
}
if (pageNumber == totalPages || totalPages == 0) {
splitStr += '<span class="sub_pages_item radiuss4"><i class="icon-angle-right left_sub right_sub"></i></span>';
} else {
splitStr += '<span class="sub_pages_item radiuss4" onclick="javascript:splitPageLink(\''+divId+'\', \''+formId+'\', ' + (pageNumber + 1) + ');"><i class="icon-angle-right left_sub right_sub"></i></span>';
}
if (pageNumber == totalPages || totalPages == 0) {
splitStr += '<span class="sub_pages_item radiuss4"><i class="icon-double-angle-right left_sub right_sub"></i></span>';
} else {
splitStr += '<span class="sub_pages_item radiuss4" onclick="javascript:splitPageLink(\''+divId+'\', \''+formId+'\', ' + totalPages + ');"><i class="icon-double-angle-right left_sub right_sub"></i></span>';
}
if(isSelectPage == true){
splitStr += ' <select name="currentPage" onChange="splitPageLink(\''+divId+'\', \''+formId+'\', this.value);" style="width: 100px; height:25px;">';
for (var i = 1; i <= totalPages; i++) {
if (i == pageNumber) {
splitStr += '<option selected value="' + i + '">跳轉到第' + i +'頁</option>';
} else {
splitStr += '<option value="' + i + '">跳轉到第' + i+ '頁</option>';
}
}
if(totalPages == 0){
splitStr += '<option value="0">無跳轉資料</option>';
}
splitStr += '</select>';
splitStr += ' ';
}else{
splitStr += '<input type="hidden" name="currentPage"/>';
}
/*if(isSelectSize == true){
splitStr += '<select name="showCount" onChange="splitPageLink(\''+divId+'\', \''+formId+'\', 1);" style="width: 80px; height:25px;">';
var optionStr = '<option value="10">每頁10條</option>';
optionStr += '<option value="20">每頁20條</option>';
optionStr += '<option value="40">每頁40條</option>';
optionStr += '<option value="80">每頁80條</option>';
optionStr += '<option value="100">每頁100條</option>';
optionStr += '<option value="200">每頁200條</option>';
optionStr = optionStr.replace('"' + pageSize + '"', '"' + pageSize + '" selected="selected"');
splitStr += optionStr;
splitStr += '</select>';
}else{
splitStr += '<input type="hidden" name="showCount">';
}
*/
splitStr += ' 共<strong>' + totalRow + '</strong>條記錄';
splitStr += '';
splitStr += '<input type="hidden" name="orderColunm" value="'+orderColunm+'"/>';
splitStr += '<input type="hidden" name="orderMode" value="'+orderMode+'"/>';
splitStr+='</div>';
splitStr+='<div class="cleans"></div>';
splitStr+='</div>';
return splitStr;
}
/**
* 分頁連結處理
*/
function splitPageLink(divId, formId, toPage){
//alert($("#" + formId + " select[name=pageNumber]").attr("name"));//input[name=pageNumber]
$("#" + formId + " select[name=currentPage],input[name=currentPage] ").val(toPage);
var url = $("#url").val();
var totalResult = $("#totalResult").val();
var basePath = $("#basePath").val();
var result = basePath+url+"?currentPage="+ toPage + "&totalResult=" + totalResult;
ajaxContent(result); //j就是分裝的一個ajax提交方法
}
分頁其實也不難,不管是邏輯分頁還是物理分頁,最主要的是分頁5要素之間的計算和轉換,上面程式碼中都有詳細的闡述。其中showCount是已知的,currentResult和list是查詢出來的,currentPage是前臺傳遞到後臺的,而totalPage是根據currentResult和currentPage計算出來的,所以說相當於5要素都是已知的。
在此希望此篇部落格可以幫助到一些人