项目中需要实现文章列表的分页显示，由于使用了bootstrap框架，所以我们选择bootstrap的分页实现方法。网上有一些这方面的介绍文章，并且也有相关的示例程序。这里结合我们的项目，介绍一下使用bootstrap的分页插件实现分页功能的方法。

1 html部分

bootstrap分页插件的名称是 bootstrap-paginator.js，下载地址

GitHub 官网地址：https://github.com/lyonlai/bootstrap-paginator，会下载很多文件，有demo程序，有css文件等，我们只使用bootstrap-paginator.js，当然需要bootstrap的css和js的基础文件。

页面引用

<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript" src="/js/bootstrap.min.js"></script>

<script type="text/javascript" src="/js/bootstrap-paginator.js"></script>

 

html代码

<div id=" article _content"></div>

<div id=" article _page"></div>

 

2 js部分

思路是先利用ajax取出首页文章列表，然后是页码的显示与功能实现，第二次调用使用ajax取出与页码对应的文章列表，从而实现分页功能。两次调用ajax都是调用一个接口，不过第一次调用的currentPage是固定值，第二次调用的currentPage是根据点击页码取出的page值。

$(document).ready(function() {

         $.ajax({

                   url: g_ServerAPI + "Column",

                   datatype: "json",

                   type: "Post",

                   data: "get=article&pageno="+ currentPage +"&pagesize=10",

//此处的currentPage提前进行了初始化，也就是为1

                   async:false,

                   success: function(data) {

                            var channelArticleAll = eval("(" + data + ")");

                            if(channelArticleAll.state == 1) {

                                    

                                     for(var i=0;i<channelArticleAll.rows.length;i++){

                                                        var channelArticleAllItem='<li>\

                                                                 <a href="">'+ channelArticleAll.rows[i].title +'</a>\

                                                                 </li>';

                                               $("# article _content ").append(channelArticleAllItem);

                                     }

                                    

                                     pageCount = (channelArticleAll.total/10)+1;

                                    

                                     var options = {

                                               bootstrapMajorVersion: 2, //版本

                                               currentPage: currentPage, //当前页数

                                               totalPages: pageCount, //总页数

                                               itemTexts: function(type, page, current) {

                                                        switch(type) {

                                                                 case "first":

                                                                           return "首页";

                                                                 case "prev":

                                                                           return "上一页";

                                                                 case "next":

                                                                           return "下一页";

                                                                 case "last":

                                                                           return "末页";

                                                                 case "page":

                                                                           return page;

                                                        }

                                               },

                                               onPageClicked: function(event, originalEvent, type, page) {

                                                        $.ajax({

                                                                 url: g_ServerAPI + "Column",

                                                                 type: "Post",

                                                                 data: " get=article&pageno ="+ page +"&pagesize=10",

                                                                 success: function(data1) {

                                                                           if(data1 != null) {

                                                                                    $("# article _content ").children().remove();

                                                                                    var channelArticleAll1 = eval("(" + data1 + ")");

                                                                                    for(var i=0;i<channelArticleAll1.rows.length;i++){

 

                                                                                             var   channelArticleAllItem1='<li>\

                                                                                    <a href="">'+ channelArticleAll1.rows[i].title +'</a>\

                                                                                                                                   </li>';

 

                            $("# article _content ").append(channelArticleAllItem1);

                                                                                    }

                                                                           }

                                                                 }

                                                        });

                                               }

                                     };

                                     $('#article _page').bootstrapPaginator(options);

                            }

                   },

                           

                   error: function(XMLHttpRequest, textStatus, errorThrown) {

                            console.log("list article error!");

                   }

         });

});

此时分页功能是能够实现的，但是有一个问题，就是显示的页码是竖着的，我们正常显示的页码应该是显示在一排，需要将bootstrap-paginator.js里的listContainer = $("<ul></ul>"),改成listContainer = $("<ul class='pagination'></ul>"),这样就能达到我们的目的，实现比较好的分页效果。

最后的页面效果是

 

用bootstrap的分页插件实现分页效果，操作起来很方便，以上介绍是简单的应用，如果需要实现更好的效果，还需要继续完善。

 

参考文章：http://www.jb51.net/article/85368.htm

http://www.cnblogs.com/moretry/p/4441728.html