Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

版权声明：本文为博主原创文章，未经博主允许不得转载。

之前做分页想过做淘宝的那个，但是因为是后台要求不高，就Bootstrap Paginator插件感觉还蛮容易上手，所以就选了它。

Bootstrap Paginator分页插件下载地址：

DownloadVisit Project in GitHub

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.                     }  
23.                    element.bootstrapPaginator(options);  
24.                 }  
25.             });  
26.         }</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请求的发送！最后实现无刷新分页。