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相结合实现动态无刷新分页效果。