http://www.cnblogs.com/java-class/p/4542154.html

     分頁元件幾乎是一般網站都會涉及到的元件，網上有很多這樣的外掛，自己挑來跳去選擇了這一款，功能強大，可擴充套件性比較強，而且幕後的工程師一直在完善這個外掛，不廢話了，上乾貨.

（模擬場景:商店網站，俺要根據使用者選擇的查詢條件，來查詢資料庫，並展示到前臺）

1.JSP頁面

如果你的web專案前臺是基於bootstrap,js只需要引入2個js：

<r:script path="/style/js/JqueryPagination/jquery.pagination-1.2.4.js" />
<r:script path="/style/js/JqueryPagination/jquery.pagination-1.2.4.min.js" />

引入一個css:

<r:style path="/style/css/jquery.pagination.css" />

頁面元素：

<div id="spbpage" 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 ? $("#sppage").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 : 'xxxxxx後臺ajax 請求類地址@RequestMapping',
            pageIndexName : 'pageIndex', //請求引數，當前頁數
            pageSizeName : 'pageSize', //請求引數，每頁數量
            totalName : 'total', //指定返回資料的總資料量的欄位名
            params : {
                cxtj : JSON2.stringify(cxtjobj),
            },
            callback : function(data, pageIndex) {
                if (data.success) {

                    //在這裡，你可以遍歷你返回回來的值，遍歷資料的方法，取決與你後臺組織好，傳遞過來的資料結構

                    //返回Map 【data.key 就可以取到 value】如下：
                    fhxxlist = data.fhxxlist;
                    
                    //返回 List<Map<String,Object>> 或者 List，遍歷方法如下：
                    $.each(fhxxlist, function(i, fhxx) {
                    });
                    
                } else {
                    hideLoading();
                    showAlert($(".container-fluid"), "提示:", data.error, "warring", true);
                }
            },
        }    //這裡你可以編寫響應三種不同的分頁元件後需要處理的邏輯，也就是回撥函式

            }).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);
        logger.info("total ====" + total + " pagesize===" + pagesize + " page====" + page);
        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;
    }