加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

发布时间:2020-12-17 21:05:05 所属栏目:安全 来源:网络整理
导读:之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它。 Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: [javascript] view plain c

之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它。

Bootstrap Paginator分页插件下载地址:

DownloadVisit Project in GitHub


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

[javascript] view plain copy

在CODE上查看代码片

派生到我的代码片

  1. <span?style="font-size:14px;">function?paging(page){??
  2. ????????????$.ajax({??
  3. ???????????????type:?"GET",??
  4. ???????????????url:?"${ctx}/api/v1/user/1/"+(page-1)+"/5",??
  5. ???????????????dataType:"json",??
  6. ???????????????success:?function(msg){??
  7. ?????????????????....//省略(查询出来数据)??
  8. ???????????????}??
  9. ????????????});??
  10. ????????????$.ajax({??
  11. ????????????????type:?"GET",??
  12. ????????????????url:"${ctx}/api/v1/user/count/1",??
  13. ????????????????dataType:"json",??
  14. ????????????????success:function(msg){??
  15. ????????????????????var?pages?=?Math.ceil(msg.data/5);//这里data里面有数据总量??
  16. ????????????????????var?element?=?$('#pageUl');//对应下面ul的ID??
  17. ????????????????????var?options?=?{??
  18. ????????????????????????bootstrapMajorVersion:3,??
  19. ????????????????????????currentPage:?page,//当前页面??
  20. ????????????????????????numberOfPages:?5,//一页显示几个按钮(在ul里面生成5个li)??
  21. ????????????????????????totalPages:pages?//总页数??
  22. ????????????????????}??
  23. ???????????????????element.bootstrapPaginator(options);??
  24. ????????????????}??
  25. ????????????});??
  26. ????????}</span>??
页面:
[html] view plain copy

在CODE上查看代码片

派生到我的代码片

  1. <span?style="font-size:14px;"><ul?class="pagination"?id="pageUl">??
  2. </ul></span>??

*li里面自动生成的


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

[javascript] view plain copy

在CODE上查看代码片

派生到我的代码片

  1. <span?style="font-size:14px;">onPageClicked:?function?(event,?originalEvent,?type,?page)?{??
  2. ??
  3. ????????????//show?the?corresponding?page?and?retrieve?the?newly?built?item?related?to?the?page?clicked?before?for?the?event?return??
  4. ??????????????
  5. ????????????var?currentTarget?=?$(event.currentTarget);??
  6. ??
  7. ????????????switch?(type)?{??
  8. ????????????case?"first":??
  9. ????????????????currentTarget.bootstrapPaginator("showFirst");??
  10. ????????????????paging(page);??
  11. ????????????????break;??
  12. ????????????????//上一页??
  13. ????????????case?"prev":??
  14. ????????????????currentTarget.bootstrapPaginator("showPrevious");??
  15. ????????????????paging(page);??
  16. ????????????????break;??
  17. ????????????case?"next":??
  18. ????????????????currentTarget.bootstrapPaginator("showNext");??
  19. ????????????????paging(page);??
  20. ????????????????break;??
  21. ????????????case?"last":??
  22. ????????????????currentTarget.bootstrapPaginator("showLast");??
  23. ????????????????paging(page);??
  24. ????????????????break;??
  25. ????????????case?"page":??
  26. ????????????????currentTarget.bootstrapPaginator("show",?page);??
  27. ????????????????paging(page);??
  28. ????????????????break;??
  29. ????????????}??
  30. ????????},</span>??

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读