简单易用的分页类（JS版）

最新推荐文章于 2023-02-13 09:21:28 发布

岁寒松柏

最新推荐文章于 2023-02-13 09:21:28 发布

阅读量466

点赞数

分类专栏： web开发文章标签： class javascript function border div c

web开发专栏收录该内容

91 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<meta charset=utf-8>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
 .page a{
  text-decoration:none;
}
.page a span{
  padding:6px 17px 6px 17px;
  border:1px solid #ABC;
  color: #1155BB;
  font-size:14px;
  font-weight:bold;
  font-family: 'helvetica neue', arial, sans-serif;
}
#Next{margin-left:5px;}
.click_page{
  background:#2266BB;
  color:#ffffff;
 }
 .page a span:hover{
   background:#3377CC;
   color:#ffffff;
 }
</style>
<body>
<ul id="myPage">
 <li>aaaaaaaa1</li>
 <li>aaaaaaaa2</li>
 <li>aaaaaaaa3</li>
 <li>aaaaaaaa4</li>
 <li>aaaaaaaa5</li>
 <li>aaaaaaaa6</li>
 <li>aaaaaaaa7</li>
 <li>aaaaaaaa8</li>
 <li>aaaaaaaa9</li>
 <li>aaaaaaaa10</li>
 </ul>
 <div id="myDev"></div>
<script>
function Paginate(pageDIV,parent,child,size){
    var $pageDest = $(pageDIV);
    var $mainTag = $(parent);
    var mainContent = $mainTag.html();
    var currentPage = 0;  //当前页
    var pageSize = size;  //每页行数    
    var numRows = $mainTag.find(child).length; 
    var numPages = Math.ceil(numRows/pageSize); //总页数
    $mainTag.bind("repaginate", function() {    
    $mainTag.find(child).hide();
    $mainTag.find(child).slice((currentPage*pageSize),(currentPage+1)*pageSize).show();
    });        
    var $pager = $("<div class='page'><a href='javascript:void(0)'><span id='Prev' style='margin-right:4px;'>« Prev</span></a></div>");
    for( var page = 0; page < numPages; page++ )
    {       
      $("<a href='javascript:void(0)'><span id='"+(page+1)+"'>"+ (page+1) +"</span></a>")
           .bind("click", { "newPage": page }, function(event){
                currentPage = event.data["newPage"];
                $("#Prev").css({"background":"#FFF"});
                $("#Next").css({"background":"#FFF"});
                if(currentPage == 0 ){
                $("#Prev").css({"background":"#c0c0c0"});
                }else if(currentPage == (numPages-1)){                
                $("#Next").css({"background":"#c0c0c0"});
                }               
                $(this).children("span").attr("class","click_page").css({"color":"#FFFFFF"});
                $(".page a span").not($(this).children("span")).attr("class","");
                $(".page a span").not($(this).children("span")).css({"color":"#1155BB"});
                $mainTag.trigger("repaginate");
            })
            .appendTo($pager);
    }   
    var next=$("<a href='javascript:void(0)'><span id='Next'>Next »</span></a>");
    $pager.append(next);
    $pager.appendTo($pageDest);//显示分页条
    $("#1").attr("class","click_page");
    $("#1").css({"color":"#FFFFFF"});
    $mainTag.trigger("repaginate");//初始化触发一次
    $("#Prev").bind("click",function(){
       var prev=Number($(".click_page").text()-2);
       currentPage=prev;       
       if(currentPage==0){        
         $(this).css({"background":"#c0c0c0"});
        }else if(currentPage<0) {        
         return;
        }        
       $("#Next").css({"background":"#FFF"});
    
       $("#"+(prev+1)).attr("class","click_page");
       $("#"+(prev+1)).css({"color":"#FFFFFF"});
       $(".page a span").not($("#"+(prev+1))).attr("class","");
       $(".page a span").not($("#"+(prev+1))).css({"color":"#1155BB"});
       $mainTag.trigger("repaginate");
    });
     $("#Next").bind("click",function(){     
       var next=$(".click_page").attr("id");       
       currentPage=Number(next);
       if((currentPage+1)>numPages) {      
         return;
       }else if((currentPage+1)==numPages) {        
         $(this).css({"background":"#c0c0c0"});
         }
        $("#Prev").css({"background":"#FFF"});
       $("#"+(currentPage+1)).attr("class","click_page");
       $("#"+(currentPage+1)).css({"color":"#FFFFFF"});
       $(".page a span").not($("#"+(currentPage+1))).attr("class","");
       $(".page a span").not($("#"+(currentPage+1))).css({"color":"#1155BB"});         
       $mainTag.trigger("repaginate");
    });    
 } 
Paginate("#myDev","#myPage","li",3);
 </script>
 </body>
 </html>

岁寒松柏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单易用的分页类（JS版）

.page a{ text-decoration:none;}.page a span{ padding:6px 17px 6px 17px; border:1px solid #ABC; color: #1155BB; font-size:14px; font-weight:bold; font-family: 'helvetica neue',
复制链接

扫一扫