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

作者: 扶强
发布时间:2015-07-02 17:26:58

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

Bootstrap Paginator分页插件下载地址:

DownloadVisit Project in GitHub


1.这是需要分页的页面放的 js函数:

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  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>  

页面:

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

*li里面自动生成的


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

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  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请求的发送!最后实现无刷新分页。

标签: Ajax Bootstrap
来源:http://www.cnblogs.com/fuqiang88/p/4343762.html

推荐: