1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 7 <script src="//cdn.bootcss.com/jquery/1.9.1/jquery.js"></script> 8 <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 9 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 10 </head> 11 12 <script> 13 $(document).ready(function(){ 14 15 //定义变量，获取总页数，获取当前页数，开始页数和结束页数 16 var pageCount=10,currentPage= 1,startPage= 1,endPage=5; 17 if(endPage>pageCount){ 18 endPage = pageCount; 19 } 20 //初始化额时候，设置第一页为选定状态 21 setPagehtml(); 22 23 //给上一页和下一页添加时间 24 $("#btn_prev").on("click",function(){ 25 prev() 26 }); 27 $("#btn_next").on("click",function(){ 28 next() 29 }); 30 31 //根据startpage和endPage拼接分页的元素。 32 function getPageHtml(){ 33 var htmlPage = ""; 34 for( var i = startPage; i <= endPage; i++ ){ 35 (function(k){ 36 htmlPage+= "<li class='li'><a href='#' class='pageIndex'>"+k+"</a></li>" 37 })(i); 38 } 39 return htmlPage; 40 } 41 42 //将凭借的pagehmml放入到正确的位置，并且给与当前页被选中的状态 43 function setPagehtml(){ 44 $("li").remove(".li"); 45 var str = getPageHtml(); 46 $("#startPage").after(str); 47 $('li').removeClass("active"); 48 $('li').filter(function(index) { 49 return $('a', this).text() == currentPage; 50 }).addClass("active"); 51 } 52 53 function next(){ 54 //点击下一页的时候 55 if(currentPage == pageCount){ 56 //donothing 57 return ; 58 }else{ 59 if(currentPage==endPage){ 60 endPage++; 61 startPage++; 62 } 63 currentPage++; 64 65 } 66 setPagehtml() 67 } 68 69 function prev(){ 70 //点击下一页的时候 71 if(currentPage == 1){ 72 //donothing 73 return ; 74 }else { 75 if (currentPage == startPage) { 76 startPage--; 77 endPage--; 78 } 79 currentPage--; 80 } 81 setPagehtml() 82 83 } 84 85 $(".pageIndex").live("click",function(){ 86 console.log($(this).text()) 87 currentPage = $(this).text(); 88 setPagehtml() 89 }) 90 }) 91 92 93 </script> 94 95 96 97 <body> 98 99 <div class="container"> 100 <ul class="pagination"> 101 102 <li id="startPage"><a href="#" id="btn_prev">上一页</a></li> 103 <li><a href="#" id="btn_next" >下一页</a></li> 104 105 106 </ul> 107 </div> 108 109 110 </body> 111 </html>