bootstrap分页插件的使用

时间:2024-03-07 19:30:20

项目中需要实现文章列表的分页显示,由于使用了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