實用的java分頁ajax分頁和普通分頁
下面給一個我專案中用用到的分頁技術，不是很完美（個人覺得用分頁標籤不錯），這個裡面有ajax分頁查詢和普通的分頁查詢,我的專案是採用struts2 + spring+mybatis。
1.
首先看一下分頁的實體類
/**
* 分頁
*
* @author Administrator
*
*/
public class PageUtil {
/** 設定當前頁碼 */
private int curPage = 1;
/** 設定每一頁的行數 */
private int pageSize = 15;
/** 從資料庫讀取的開始記錄數 */
private int start;
/** 從資料庫讀取的行數(每一頁顯示的記錄數) */
private int pageCount;
/** 總共行數(記錄數) */
private int totalRow;
/** 總共頁數 */
private int totalPage;
/** 分頁導航條 */
private String pageBar;
/**
* 根據從資料庫讀出的總記錄數初始化相應的分頁變數
* @param totalRow 總記錄數
*/
public void setPagesVariable(int totalRow) {
this.setTotalRow(totalRow);
this.setTotalPage(totalRow / pageSize);
if (totalRow % pageSize > 0){
this.setTotalPage(totalPage + 1);
}
if (curPage > 1) {
this.setStart((curPage - 1) * pageSize);
} else{
this.setStart(0);
}
this.setPageCount(pageSize);
}
/**
* @return the curPage
*/
public int getCurPage() {
return curPage;
}
/**
* @param curPage
* the curPage to set
*/
public void setCurPage(int curPage) {
this.curPage = curPage;
}
/**
* @return the pageSize
*/
public int getPageSize() {
return pageSize;
}
/**
* @param pageSize
* the pageSize to set
*/
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
/**
* @return the start
*/
public int getStart() {
return start;
}
/**
* @param start
* the start to set
*/
public void setStart(int start) {
this.start = start;
}
/**
* @return the pageCount
*/
public int getPageCount() {
return pageCount;
}
/**
* @param pageCount the pageCount to set
*/
public void setPageCount(int pageCount) {
this.pageCount = pageCount;
}
/**
* @return the totalRow
*/
public int getTotalRow() {
return totalRow;
}
/**
* @param totalRow
* the totalRow to set
*/
public void setTotalRow(int totalRow) {
this.totalRow = totalRow;
}
/**
* @return the totalPage
*/
public int getTotalPage() {
return totalPage;
}
/**
* @param totalPage
* the totalPage to set
*/
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
/**
* @return the pageBar
*/
public String getPageBar() {
return pageBar;
}
/**
* @param pageBar
* the pageBar to set
*/
public void setPageBar(String pageBar) {
this.pageBar = pageBar;
}
/**
* 分頁導航條(顯示分頁連結控制程式碼)
* @return
*/
public String getToolsMenu() {
StringBuffer str = new StringBuffer("");
int next, prev;
prev = curPage - 1;
next = curPage + 1;
if (curPage > 1) {
str.append("<a href=\"#\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value=1;this.parentNode.submit();\">首頁</a> ");
} else {
str.append("首頁 ");
}
if (curPage > 1) {
str.append("<a href=\"#\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value="
+ prev + ";this.parentNode.submit();\">上頁</a> ");
} else {
str.append("上頁</a> ");
}
if (curPage < totalPage) {
str.append("<a href=\"#\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value="
+ next + ";this.parentNode.submit();\">下頁</a> ");
} else {
str.append("下頁 ");
}
if (totalPage > 1 && curPage != totalPage) {
str.append("<a href=\"#\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value="
+ totalPage
+ ";this.parentNode.submit();\">末頁</a> ");
} else {
str.append("末頁 ");
}
str.append(" 共" + totalRow + "條記錄");
str.append(" 每頁<SELECT size=\"1\" name=\"page.pageSize\" onchange=\"this.form.getElementsByTagName('input')[0].value=1;this.form.submit();\">");
if (pageSize == 2) {
str.append("<OPTION value=2 selected>2</OPTION>");
} else {
str.append("<OPTION value=2>2</OPTION>");
}
if (pageSize == 5) {
str.append("<OPTION value=5 selected>5</OPTION>");
} else {
str.append("<OPTION value=5>5</OPTION>");
}
if (pageSize == 10) {
str.append("<OPTION value=10 selected>10</OPTION>");
} else {
str.append("<OPTION value=10>10</OPTION>");
}
if (pageSize == 15) {
str.append("<OPTION value=15 selected>15</OPTION>");
} else {
str.append("<OPTION value=15>15</OPTION>");
}
if (pageSize == 20) {
str.append("<OPTION value=20 selected>20</OPTION>");
} else {
str.append("<OPTION value=20>20</OPTION>");
}
if (pageSize == 50) {
str.append("<OPTION value=50 selected>50</OPTION>");
} else {
str.append("<OPTION value=50>50</OPTION>");
}
if (pageSize == 100) {
str.append("<OPTION value=100 selected>100</OPTION>");
} else {
str.append("<OPTION value=100>100</OPTION>");
}
str.append("</SELECT>");
str.append("條 分" + totalPage + "頁顯示 轉到");
str.append("<SELECT size=\"1\" name=\"Pagelist\" onchange=\"this.form.getElementsByTagName('input')[0].value=this.value;this.form.submit();\">");
for (int i = 1; i < totalPage + 1; i++) {
if (i == curPage) {
str.append("<OPTION value=" + i + " selected>" + i
+ "</OPTION>");
} else {
str.append("<OPTION value=" + i + ">" + i + "</OPTION>");
}
}
str.append("</SELECT>頁");
str.append("<INPUT type=\"hidden\" value=" + curPage
+ " name=\"page.curPage\" > ");
return str.toString();
}
/**
* AJAX分頁導航條(顯示分頁連結控制程式碼)
* @return
*/
public String getAJAXToolsMenu() {
StringBuffer str = new StringBuffer("");
int next, prev;
prev = curPage - 1;
next = curPage + 1;
str.append("<span class=\"showControlPage\">");
if (curPage > 1) {
str.append("<a href=\"javascript:\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value=1;showPages(this.parentNode.getElementsByTagName('input')[0].value,this.parentNode.getElementsByTagName('select')[0].value);\">首頁</a> ");
} else {
str.append("首頁 ");
}
if (curPage > 1) {
str.append("<a href=\"javascript:\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value="
+ prev + ";showPages(this.parentNode.getElementsByTagName('input')[0].value,this.parentNode.getElementsByTagName('select')[0].value);\">上頁</a> ");
} else {
str.append("上頁</a> ");
}
if (curPage < totalPage) {
str.append("<a href=\"javascript:\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value="
+ next + ";showPages(this.parentNode.getElementsByTagName('input')[0].value,this.parentNode.getElementsByTagName('select')[0].value);\">下頁</a> ");
} else {
str.append("下頁 ");
}
if (totalPage > 1 && curPage != totalPage) {
str.append("<a href=\"javascript:\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value="
+ totalPage
+ ";showPages(this.parentNode.getElementsByTagName('input')[0].value,this.parentNode.getElementsByTagName('select')[0].value);\">末頁</a> ");
} else {
str.append("末頁 ");
}
str.append(" 共" + totalRow + "條記錄");
str.append(" 每頁<SELECT size=\"1\" name=\"page.pageSize\" onchange=\"this.parentNode.getElementsByTagName('input')[0].value=1;showPages(1,this.value);\">");
if (pageSize == 2) {
str.append("<OPTION value=2 selected>2</OPTION>");
} else {
str.append("<OPTION value=2>2</OPTION>");
}
if (pageSize == 5) {
str.append("<OPTION value=5 selected>5</OPTION>");
} else {
str.append("<OPTION value=5>5</OPTION>");
}
if (pageSize == 10) {
str.append("<OPTION value=10 selected>10</OPTION>");
} else {
str.append("<OPTION value=10>10</OPTION>");
}
if (pageSize == 15) {
str.append("<OPTION value=15 selected>15</OPTION>");
} else {
str.append("<OPTION value=15>15</OPTION>");
}
if (pageSize == 20) {
str.append("<OPTION value=20 selected>20</OPTION>");
} else {
str.append("<OPTION value=20>20</OPTION>");
}
if (pageSize == 50) {
str.append("<OPTION value=50 selected>50</OPTION>");
} else {
str.append("<OPTION value=50>50</OPTION>");
}
if (pageSize == 100) {
str.append("<OPTION value=100 selected>100</OPTION>");
} else {
str.append("<OPTION value=100>100</OPTION>");
}
str.append("</SELECT>");
str.append("條 分" + totalPage + "頁顯示 轉到");
str.append("<SELECT size=\"1\" name=\"Pagelist\" onchange=\"this.parentNode.getElementsByTagName('input')[0].value=this.value;showPages(this.value,this.parentNode.getElementsByTagName('select')[0].value);\">");
for (int i = 1; i < totalPage + 1; i++) {
if (i == curPage) {
str.append("<OPTION value=" + i + " selected>" + i
+ "</OPTION>");
} else {
str.append("<OPTION value=" + i + ">" + i + "</OPTION>");
}
}
str.append("</SELECT>頁");
str.append("<INPUT type=\"hidden\" value=" + curPage
+ " name=\"page.curPage\" > ");
str.append("</span>");
return str.toString();
}
/* (non-Javadoc)
* @see java.lang.Object#toString()
*/
@Override
public String toString() {
return "PageUtil [curPage=" + curPage + ", pageSize=" + pageSize
+ ", start=" + start + ", pageCount=" + pageCount
+ ", totalRow=" + totalRow + ", totalPage=" + totalPage + "]";
}
}
2.在看一下後臺java怎樣呼叫這個實體
private DataEntity dataEntity;
private List<DataEntity> dataList;
private DataAffair dataAffair;
private PageUtil page;
private Integer year;
public String selectByPage() {
int count = dataAffair.allDataCount();//到業務層獲取總條數
page.setPagesVariable(count);
String pageBar = page.getAJAXToolsMenu();
request.put("pageBar", pageBar);
Map<String, Integer> pageMap = new HashMap<String, Integer>();
pageMap.put("start", page.getStart());//設定資料查詢的開始位置
pageMap.put("pageCount", page.getPageCount());//設定查詢的資料條數
dataList = dataAffair.selectDataByPageInfoWeb(pageMap);//去業務層獲取資料
return success;
}
3.在看一下前段怎麼呼叫分頁(jquery)
<script language="javascript" type="text/javascript">
var curPage = 1, pageSize = 10;
$(function() {
dataInfoList();
});
function dataInfoList() {
submitData = "page.curPage=" + curPage + "&page.pageSize=" + pageSize + "&year=" + year;
$.ajax({ //一個Ajax過程
type : "post", //以post方式與後臺溝通
url : "/html/selectDataListWeb.action", //與此頁面溝通
dataType : "html",//返回的值以 html方式 解釋
data : submitData,
beforeSend: function(XMLHttpRequest){
$("#loadingMessage").html(" <img src=\"/html/images/loading.gif\"><span>請稍後，資料載入中！</span>");
$("#loadingMessage").css({ display:"" });
},
success : function(data) {//如果呼叫成功
$("#site_list").html(data);
$(".showControlPage").append("<input name=\"year\" type=\"hidden\" />");
$("#loadingMessage").css({ display:"none" });
},
error:function(){
$("#loadingMessage").css({ display:"" });
$("#loadingMessage").html("<span class=\"errorFont\">資料載入遇到錯誤，請稍後再試</span>");
}
})//發給資料
}
function showPages(curPageUser, pageSizeUser) {
curPage = curPageUser;
pageSize = pageSizeUser;
dataInfoList();
}
</script>
最終效果圖
由於本人許可權不夠不能上圖
結束語：
這只是我個人思路寫出來的分頁程式碼，網各位網友補充不足之處，還有普通的分頁實現直接呼叫即可，這裡不再闡述。