Bootstrap Paginator分頁插件+ajax

Bootstrap Paginator分頁插件下載地址：

DownloadVisit Project in GitHub

 Bootstrap分頁插件屬性介紹：

http://www.cnblogs.com/hqlong/p/6667766.html

 

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

[javascript]  view plain  copy  

1. <span style="font-size:14px;">function paging(page){  
2.             $.ajax({  
3.                type: "GET",  
4.                url: "${ctx}/api/v1/user/1/"+(page-1)+"/5",  
5.                dataType:"json",  
6.                success: function(msg){  
7.                  ....//省略（查詢出來數據）  
8.                }  
9.             });  
10.             $.ajax({  
11.                 type: "GET",  
12.                 url:"${ctx}/api/v1/user/count/1",  
13.                 dataType:"json",  
14.                 success:function(msg){  
15.                     var pages = Math.ceil(msg.data/5);//這里data里面有數據總量  
16.                     var element = $('#pageUl');//對應下面ul的ID  
17.                     var options = {  
18.                         bootstrapMajorVersion:3,  
19.                         currentPage: page,//當前頁面  
20.                         numberOfPages: 5,//一頁顯示幾個按鈕（在ul里面生成5個li）  
21.                         totalPages:pages //總頁數
    
22.                      onPageChanged:function (event, originalEvent, typePage, currentPage) {
                    //事件： typePage是被點擊的頁碼
                }
     
23.                     } 
    
24. 
    
25.                    element.bootstrapPaginator(options);  
26.                 }  
27.             });  
28.         }</span>  

頁面：

[html]  view plain  copy  

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

*li里面自動生成的

2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件，如下：

[javascript]  view plain  copy  

1. <span style="font-size:14px;">onPageClicked: function (event, originalEvent, type, page) {  
2.   
3.             //show the corresponding page and retrieve the newly built item related to the page clicked before for the event return  
4.               
5.             var currentTarget = $(event.currentTarget);  
6.   
7.             switch (type) {  
8.             case "first":  
9.                 currentTarget.bootstrapPaginator("showFirst");  
10.                 paging(page);  
11.                 break;  
12.                 //上一頁  
13.             case "prev":  
14.                 currentTarget.bootstrapPaginator("showPrevious");  
15.                 paging(page);  
16.                 break;  
17.             case "next":  
18.                 currentTarget.bootstrapPaginator("showNext");  
19.                 paging(page);  
20.                 break;  
21.             case "last":  
22.                 currentTarget.bootstrapPaginator("showLast");  
23.                 paging(page);  
24.                 break;  
25.             case "page":  
26.                 currentTarget.bootstrapPaginator("show", page);  
27.                 paging(page);  
28.                 break;  
29.             }  
30.         },</span>  

*在你點擊的頁面樣式出來后調用paging（page）方法，這里的page源文件里的參數已經有了，直接傳！

效果：當樣式改變后，直接拿控件的page值進行ajax請求的發送！最后實現無刷新分頁。