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

Bootstrap Paginator分页插件下载地址：

DownloadVisit Project in GitHub

1.这是需要分页的页面放的 js函数：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);

}

});

}

页面：

*li里面自动生成的

2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件，如下：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;

}

},

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

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

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

更多Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果相关文章请关注PHP中文网！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！