项目中需要实现文章列表的分页显示，由于使用了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的分页插件实现分页效果，操作起来很方便，以上介绍是简单的应用，如果需要实现更好的效果，还需要继续完善。