js ajax 翻页 插件,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相结合实现动态无刷新分页效果的相关知识，希望对大家有所帮助