分頁組件幾乎是一般網站都會涉及到的組件，網上有很多這樣的插件，自己挑來跳去選擇了這一款。
官方Demo網址：http://mricle.com/JqueryPagination
功能強大，可擴展性比較強，而且幕后的工程師一直在完善這個插件，不廢話了，上干貨。
（模擬場景:商店網站，根據用戶選擇的查詢條件，來查詢數據庫，並展示到前台）
1.JSP頁面
如果你的web項目前台是基於bootstrap,js只需要引入2個js：
<script path="/style/js/JqueryPagination/jquery.pagination-1.2.4.js" /> <script path="/style/js/JqueryPagination/jquery.pagination-1.2.4.min.js" />
引入一個css:
<style path="/style/css/jquery.pagination.css" />
頁面元素：
<div id="myPage" class="m-pagination"></div>
2.JS 控制
a.組織要查詢的商品的特征和限制條件，條件來自於頁面用戶輸入或者是下拉框選擇，組織為一個Object,類似與java 中的map;
var cxtj = { lx : $("#splx").val(), 商品類型 scrq : $("#spscrq").val(), 商品生產日期 ys : $("#spys").val(), 商品顏色 cc : $("#spcc").val(), 商品尺寸 sccj : $("#sccj").val() 生產廠家 };
b.定義一個全局的變量count，因為我使用的時候，出現了個問題，當變更查詢條件后，分頁組件需要重新生成；
var count = 1; count++; count > 2 ? $("#myPage").page('destroy') : '
c.前端總體代碼如下：
具體的方法參數這里就不多言了，官方Demo 中寫的比較詳細
var count = 1; function query() {
var cxtjobj = { lx : $("#splx").val(), 商品類型 scrq : $("#spscrq").val(), 商品生產日期 ys : $("#spys").val(), 商品顏色 cc : $("#spcc").val(), 商品尺寸 sccj : $("#sccj").val() 生產廠家 }; count++; //count 計數的作用，為當第二次以后點擊請求時，先銷毀分頁組件 count > 2 ? $("#sppage").page('destroy') : ''; $("#sppage").page({ remote : { url : '請求地址@RequestMapping', pageIndexName : 'pageIndex', //請求參數，當前頁數 pageSizeName : 'pageSize', //請求參數，每頁數量 totalName : 'total', //指定返回數據的總數據量的字段名 params : { cxtj : JSON2.stringify(cxtjobj), }, callback : function(data, pageIndex) { if (data.success) {
//-----在這里，你可以遍歷你返回回來的值，遍歷數據的方法，取決與你后台組織好，傳遞過來的數據結構-----
//1.返回Map 【data.key 就可以取到 value】如下： fhxxlist = data.fhxxlist;
//2.返回 List<Map<String,Object>> 或者 List，遍歷方法如下： $.each(fhxxlist, function(i, fhxx) { });
} else alert(data,error); }, } //---------這里你可以編寫響應三種不同的分頁組件后需要處理的邏輯，也就是回調函數------------
}).on("pageClicked", function (event, pageIndex) { $("#eventLog").append('EventName = pageClicked , pageIndex = ' + pageIndex + '<br />'); }).on('jumpClicked', function (event, pageIndex) { $("#eventLog").append('EventName = jumpClicked , pageIndex = ' + pageIndex + '<br />'); }).on('pageSizeChanged', function (event, pageSize) { $("#eventLog").append('EventName = pageSizeChanged , pageSize = ' + pageSize + '<br />'); });
}
3.后台java類進行處理的兩個公共方法
a.分頁組件傳遞一個 pagesize 和 pageindex ，需要返回datas 和 total;
b. 1)方法根據 countsql 查詢出來的總條數, pageindex 來計算出總共需要多少頁，並返回一個二維數組，沒有用List是因為我覺得，二維數據已經夠用；
2)方法將計算出來的二維數組，根據請求的 pageindex ,取出一個開始到結束的區間，並且在這個區間里面查詢需要展示到前台的數據集合，返回給前台；
c.前台頁面，每觸發一次事件（pageClick,jumpClick,pageSizeChange）或者變更查詢條件，都會請求一次后台，返回特定的數據集合；
d.不同的地方是（pageClick,jumpClick,pageSizeChange）事件，始終是一個分頁組件，而變更查詢條件會銷毀原來的組件，重新初始化；
/**
* 描述：根據 countsql 查詢出來的總條數, pageindex 計算出總共需要多少頁
*/
public int[][] getPagearray(int total,int pagesize){
int page = (total%pagesize == 0 ? total/pagesize:total/pagesize + 1);int[][] pagearray = new int[page][pagesize];
int j = 1;
for(int i = 0;i<page;i++){
for (int k = 0;k<pagesize;k++){
pagearray[i][k] = j;
j++;
}
}
return pagearray;
}
/**
* 描述：根據請求的 pageindex ,取出一個開始到結束的區間，並且在這個區間里面查詢需要展示到前台的數據集合，返回給前台
*/
public Map<String,Object> createPagination(String countsql,String cxxxsql,String retname,int pageSize,int pageIndex){
Map <String,Object> result = new HashMap<String,Object>();
List<Map<String, Object>> countlist;
try {
countlist = selecter.select2list(countsql);
int count = Integer.parseInt(countlist.get(0).get("count").toString());
if(count == 0){
result.put("error", "沒有查詢到信息,請變更查詢條件！");
result.put("total", 0);
}else{
int[][] pagearray = getPagearray(count,pageSize);
String jtxxsql = "SELECT * " +
" FROM (SELECT P.*, ROWNUM RID " +
" FROM (" + cxxxsql + ") P) " +
" WHERE RID BETWEEN "+ pagearray[pageIndex][0] +" AND "+ pagearray[pageIndex][pageSize - 1] ;
List<Map<String,Object>> cxxxlist = selecter.select2list(jtxxsql);
result.put("success",true);
result.put("total",count);
result.put("data", pagearray[pageIndex]);
result.put(retname, cxxxlist);
}
} catch (DataOptException e) {
e.printStackTrace();
}
return result;
}