BootstrapPaginator分页插件与ajax相结合实现动态无刷新分页效果.docxVIP

这篇文章主要介绍了 Bootstrap Paginator 分页插件与 ajax 相结合实现动态无刷新分页效果，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧 Bootstrap Paginator 分页插件下载地址： DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js 函数： lt;span style=font-size:14px;gt;function paging(page){nbsp; $.ajax({nbsp; type: GET,nbsp; url: ${ctx}/api/v1/user/1/+(1)+/5,nbsp; dataType:json,nbsp; success: function(msg){nbsp; //省略（查询出来数据） nbsp; }nbsp; });nbsp; $.ajax({nbsp; type: GET,nbsp; url:${ctx}/api/v1/user/count/1,nbsp; dataType:json,nbsp; success:function(msg){nbsp; var pages = Math.ceil(msg.data/5);// 这里 data 里面有数据总量 nbsp; var element = $(#pageUl);// 对应下面 var options = {nbsp; bootstrapMajorVersion:3,nbsp;  ul  的  IDnbsp; currentPage: page,//当前页面 nbsp; numberOfPages: 5,// 一页显示几个按钮（在  ul  里面生成 5 个  li ） nbsp; totalPages:pages //总页数 nbsp; }nbsp; element.bootstrapPaginator(options);nbsp; }nbsp; });nbsp; }lt;/spangt;nbsp; 页面： lt;span style=font-size:14px;gt;lt;ul class=pagination id=pageUlgt;nbsp; lt;/ulgt;lt;/spangt; *li  里面自动生成的 2.最重要也是最核心的是要自己改下 bootstrap-paginator.js 源文件，如下： lt;span style=font-size:14px;gt;onPageClicked: function (event, originalEvent, type, page) {nbsp; //show the corresponding page and retrieve the newly built item related to the page clicked before for the event returnnbsp; var currentTarget = $(event.currentTarget);nbsp; switch (type) {nbsp; case first:nbsp; currentTarget.bootstrapPaginator(showFirst);nbsp; paging(page);nbsp; break;nbsp; //上一页 nbsp; case prev:nbsp; currentTarget.bootstrapPaginator(showPrevious);nbsp; paging(page);nbsp; break;nbsp; case next:nbsp; currentTarget.bootstrapPaginator(showNext);nbsp; paging(page);nbsp; break;nbsp; case last:nbsp; currentTarget.bootstrapPaginator(showLast);nbsp; paging(page);nbsp; break;nbsp; case page:nbsp; currentTarget.bootstrapPaginator(show, page);nbsp; paging(page);nbsp; break;nbsp; }nbsp; },lt;/spangt; 在你点击的页面样式出来后调用 paging（ page）方法，这里的 page 源文件里的参数已经有了，直接传！ 效果：当样式改变后，直接拿控件的page 值进行 ajax 请求的发送！最后实现无刷新分 页。 以上所述是小编给大家介绍的 Bootstrap Paginator 分页插件与 ajax 相结合实现动态无刷新分页效果