bootstrap分页插件的使用

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