Bootstrap Paginator分页插件与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相结合实现动态无刷新分页效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。