Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

时间:2021-05-28

Bootstrap Paginator分页插件下载地址:

DownloadVisit Project in GitHub

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

<span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:"json", success: function(msg){ ....//省略(查询出来数据) } }); $.ajax({ type: "GET", url:"${ctx}/api/v1/user/count/1", dataType:"json", success:function(msg){ var pages = Math.ceil(msg.data/5);//这里data里面有数据总量 var element = $('#pageUl');//对应下面ul的ID var options = { bootstrapMajorVersion:3, currentPage: page,//当前页面 numberOfPages: 5,//一页显示几个按钮(在ul里面生成5个li) totalPages:pages //总页数 } element.bootstrapPaginator(options); } }); }</span>

页面:

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

*li里面自动生成的

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

<span style="font-size:14px;">onPageClicked: function (event, originalEvent, type, page) { //show the corresponding page and retrieve the newly built item related to the page clicked before for the event return var currentTarget = $(event.currentTarget); switch (type) { case "first": currentTarget.bootstrapPaginator("showFirst"); paging(page); break; //上一页 case "prev": currentTarget.bootstrapPaginator("showPrevious"); paging(page); break; case "next": currentTarget.bootstrapPaginator("showNext"); paging(page); break; case "last": currentTarget.bootstrapPaginator("showLast"); paging(page); break; case "page": currentTarget.bootstrapPaginator("show", page); paging(page); break; } },</span>

*在你点击的页面样式出来后调用paging(page)方法,这里的page源文件里的参数已经有了,直接传!

效果:当样式改变后,直接拿控件的page值进行ajax请求的发送!最后实现无刷新分页。

以上所述是小编给大家介绍的Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章