之前做分頁想過做淘寶的那個，但是因為是後臺要求不高，就Bootstrap Paginator外掛感覺還蠻容易上手，所以就選了它。

Bootstrap Paginator分頁外掛下載地址：

1.這是需要分頁的頁面放的 js函式：

<span style="font-size:14px;">function paging(page){
        	$.ajax({
          	   type: "GET",
          	   url: "${ctx}/api/v1/user/1/"+(page-1)+"/5",
          	   dataType:"json",
          	   success: function(msg){
 	         	 ....//省略（查詢出來資料）
          	   }
          	});
        	$.ajax({
        		type: "GET",
        		url:"${ctx}/api/v1/user/count/1",
        		dataType:"json",
        		success:function(msg){
                    var pages = Math.ceil(msg.data/5);//這裡data裡面有資料總量
                    var element = $('#pageUl');//對應下面ul的ID
                    var options = {
                        bootstrapMajorVersion:3,
                        currentPage: page,//當前頁面
                        numberOfPages: 5,//一頁顯示幾個按鈕（在ul裡面生成5個li）
                        totalPages:pages //總頁數
                    }
                   element.bootstrapPaginator(options);
        		}
        	});
        }</span>
 

<span style="font-size:14px;"><ul class="pagination" id="pageUl">
</ul></span>

*li裡面自動生成的

2.最重要也是最核心的是要自己改下bootstrap-paginator.js原始檔，如下：

<span style="font-size:14px;">onPageClicked: function (event, originalEvent, type, page) {

            //show the corresponding page and retrieve the newly built item related to the page clicked before for the event return
        	
            var currentTarget = $(event.currentTarget);

            switch (type) {
            case "first":
                currentTarget.bootstrapPaginator("showFirst");
                paging(page);
                break;
                //上一頁
            case "prev":
                currentTarget.bootstrapPaginator("showPrevious");
                paging(page);
                break;
            case "next":
                currentTarget.bootstrapPaginator("showNext");
                paging(page);
                break;
            case "last":
                currentTarget.bootstrapPaginator("showLast");
                paging(page);
                break;
            case "page":
                currentTarget.bootstrapPaginator("show", page);
                paging(page);
                break;
            }
        },</span>
 

*在你點選的頁面樣式出來後呼叫paging（page）方法，這裡的page原始檔裡的引數已經有了，直接傳！

效果：當樣式改變後，直接拿控制元件的page值進行ajax請求的傳送！最後實現無重新整理分頁。