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

浏览数：124 / 时间：2015年06月09日

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

Bootstrap Paginator分页插件下载地址：

DownloadVisit Project in GitHub


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

[javascript] view plaincopy技术分享技术分享
  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 plaincopy技术分享技术分享
  1. <span style="font-size:14px;"><ul class="pagination" id="pageUl">  
  2. </ul></span>  

*li里面自动生成的


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

[javascript] view plaincopy技术分享技术分享
  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请求的发送！最后实现无刷新分页。

技术分享

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 com log src java http html class style 代码 com log src java http html

相关文章

随机文章

您可能还喜欢

您可能还喜欢