<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head> <script>
$(document).ready(function(){ //定义变量，获取总页数，获取当前页数，开始页数和结束页数
var pageCount=10,currentPage= 1,startPage= 1,endPage=5;
if(endPage>pageCount){
endPage = pageCount;
}
//初始化额时候，设置第一页为选定状态
setPagehtml(); //给上一页和下一页添加时间
$("#btn_prev").on("click",function(){
prev()
});
$("#btn_next").on("click",function(){
next()
}); //根据startpage和endPage拼接分页的元素。
function getPageHtml(){
var htmlPage = "";
for( var i = startPage; i <= endPage; i++ ){
(function(k){
htmlPage+= "<li class='li'><a href='#' class='pageIndex'>"+k+"</a></li>"
})(i);
}
return htmlPage;
} //将凭借的pagehmml放入到正确的位置，并且给与当前页被选中的状态
function setPagehtml(){
$("li").remove(".li");
var str = getPageHtml();
$("#startPage").after(str);
$('li').removeClass("active");
$('li').filter(function(index) {
return $('a', this).text() == currentPage;
}).addClass("active");
} function next(){
//点击下一页的时候
if(currentPage == pageCount){
//donothing
return ;
}else{
if(currentPage==endPage){
endPage++;
startPage++;
}
currentPage++; }
setPagehtml()
} function prev(){
//点击下一页的时候
if(currentPage == 1){
//donothing
return ;
}else {
if (currentPage == startPage) {
startPage--;
endPage--;
}
currentPage--;
}
setPagehtml() } $(".pageIndex").live("click",function(){
console.log($(this).text())
currentPage = $(this).text();
setPagehtml()
})
}) </script> <body> <div class="container">
<ul class="pagination"> <li id="startPage"><a href="#" id="btn_prev">上一页</a></li>
<li><a href="#" id="btn_next" >下一页</a></li> </ul>
</div> </body>
</html>