内容发布更新时间 : 2024/6/27 0:53:09星期一 下面是文章的全部内容请认真阅读。

这篇文章主要介绍了Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧 Bootstrap Paginator分页插件下载地址： DownloadVisit Project in GitHub

1.这是需要分页的页面放的 js函数：

<span style=\ $.ajax({ 

type: \

url: \ dataType:\

success: function(msg){  ....//省略（查询出来数据）  }  }); 

$.ajax({ 

type: \

url:\ dataType:\

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);  }  }); 

}</span>  页面：

<span style=\ </ul></span> *li里面自动生成的

2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件，如下：

<span style=\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 \

currentTarget.bootstrapPaginator(\ paging(page);  break;  //上一页  case \

currentTarget.bootstrapPaginator(\ paging(page);  break; 

case \

currentTarget.bootstrapPaginator(\ paging(page);  break;  case \

currentTarget.bootstrapPaginator(\ paging(page);  break; 

case \

currentTarget.bootstrapPaginator(\ paging(page);  break;  } 

},</span>

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

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

以上所述是小编给大家介绍的Bootstrap Paginator分页插件与ajax相结合实现动态无刷

新分页效果的相关知识，希望对大家有所帮助