Home > Web Front-end > JS Tutorial > body text

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

高洛峰
Release: 2017-01-10 14:24:27
Original
2381 people have browsed it

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>
Copy after login

Page:

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

#*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>
Copy after login

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

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template