您好,欢迎访问一九零五行业门户网

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

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相结合实现动态无刷新分页效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对的支持!
更多bootstrap paginator分页插件与ajax相结合实现动态无刷新分页效果。
其它类似信息

推荐信息