基于bootstrap分页

  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>
发表于 2016-05-04 23:12 沉默的威廉阅读(187) 评论(0) 编辑收藏举报