Bootstrap Paginator分页插件+ajax

Bootstrap Paginator分页插件下载地址:

DownloadVisit Project in GitHub

 Bootstrap分页插件属性介绍:

http://www.cnblogs.com/hqlong/p/6667766.html

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

[javascript] view plain copy Bootstrap Paginator分页插件+ajaxBootstrap Paginator分页插件+ajax
  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.                      onPageChanged:function (event, originalEvent, typePage, currentPage) {
                    //事件:typePage是被点击的页码
                }
  23. }
  24. element.bootstrapPaginator(options);
  25. }
  26. });
  27. }</span>

页面:

[html] view plain copy Bootstrap Paginator分页插件+ajaxBootstrap Paginator分页插件+ajax
  1. <span style="font-size:14px;"><ul class="pagination" id="pageUl">
  2. </ul></span>

*li里面自动生成的

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

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

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

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

Bootstrap Paginator分页插件+ajax

Bootstrap Paginator分页插件+ajax

上一篇:Bootstrap Paginator分页插件使用示例


下一篇:Bootstrap Paginator 分页 demo.