Bootstrap Paginator paging plugin combines with ajax to achieve dynamic non-refresh paging effect

Bootstrap Paginator paging plug-in download address:

DownloadVisit Project in GitHub

1. This is the js function for pages that need to be paginated:

<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 = $(&#39;#pageUl&#39;);//对应下面ul的ID
var options = {
bootstrapMajorVersion:3,
currentPage: page,//当前页面
numberOfPages: 5,//一页显示几个按钮（在ul里面生成5个li）
totalPages:pages //总页数
}
element.bootstrapPaginator(options);
}
});
}</span>

Page:

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

#*li automatically generates

2. The most important and core thing is You need to change the bootstrap-paginator.js source file yourself, as follows:

<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>

*Call the paging (page) method after the page style you clicked comes out, here The parameters in the page source file are already there, just pass them in!

Effect: When the style is changed, directly use the page value of the control to send an ajax request! Finally, no refresh paging is achieved.

The above is the relevant knowledge that the editor introduces to you by combining the Bootstrap Paginator paging plug-in with ajax to achieve dynamic non-refresh paging effect. I hope it will be helpful to everyone. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more related articles about the combination of Bootstrap Paginator paging plug-in and ajax to achieve dynamic non-refresh paging effect, please pay attention to the PHP Chinese website!