码迷,mamicode.com
首页 > Web开发 > 详细

写个js 分页玩玩(原创)

时间:2014-05-21 20:46:00      阅读:477      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   c   code   java   

bubuko.com,布布扣
<ul id="page">
    <li class="pagetest">1</li>
    <li class="pagetest">2</li>
    <li class="pagetest">3</li>
    <li class="pagetest">4</li>
    <li class="pagetest">5</li>
    <li class="pagetest">6</li>
    <li class="pagetest">7</li>
    <li class="pagetest">8</li>
    <li class="pagetest">9</li>
    <li class="pagetest">10</li>
    <li class="pagetest">11</li>
    <li class="pagetest">12</li>
</ul>
<div id="pageDom"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="dibu">    
    <script>    
    var pageInfo={PageSize:null,TotalItemCount:null,PageNumber:null,PageCount:null,HasPreviousPage:null,HasNextPage:null,frontPageSize:5,backPageSize:4,pageListDomID:null,pageNumberDomID:null};
    pageInfo.pageListDomID="page";
    pageInfo.pageNumberDomID="pageDom";
    pageInfo.PageSize=2;
    
    GetPageInfo(2);    
    
    function GetPageInfo(pageNumber)
    {    
        $("#"+pageInfo.pageListDomID).children().hide().slice((pageNumber-1)*pageInfo.PageSize,pageNumber*pageInfo.PageSize).show();        
        
        pageInfo.TotalItemCount=$("#"+pageInfo.pageListDomID).children().length;
        pageInfo.PageNumber=pageNumber;
        pageInfo.PageCount=Math.ceil(pageInfo.TotalItemCount/pageInfo.PageSize);
        if(pageInfo.PageNumber>1)
        {
            pageInfo.HasPreviousPage=true;
        }else
        {
            pageInfo.HasPreviousPage=false;
        }    
        if(pageInfo.PageNumber<pageInfo.PageCount)
        {
            pageInfo.HasNextPage=true;
        }else
        {
            pageInfo.HasNextPage=false;
        }
        
        updatePage(pageInfo.pageNumberDomID);
    }

    function updatePage(id)
    {        
        $("#"+id).empty();        
        if (pageInfo.HasPreviousPage)
        {
            $("#"+id).append(<span class="hag"><a href="javascript:GetPageInfo(pageInfo.PageNumber - 1);">上一页</a></span>);              
        }
        for (var i = pageInfo.PageNumber - pageInfo.frontPageSize; i <= pageInfo.PageNumber + pageInfo.backPageSize; i++)
        {
            if (i >= 1 && i <= pageInfo.PageCount)
            {
                if (pageInfo.PageNumber == i)
                {
                    $("#"+id).append(<span class="hag"><a class="on">+i+</a></span>);
                }
                else
                {
                    $("#"+id).append(<span class="hag"><a href="javascript:GetPageInfo(+i+);">+i+</a></span>);                          
                }
            }
        }
        if (pageInfo.HasNextPage)
        {
            $("#"+id).append(<span class="hag"><a href="javascript:GetPageInfo(pageInfo.PageNumber +1);">下一页</a></span>);
        }
    }    
    </script>        
</div>
  
bubuko.com,布布扣

 

写个js 分页玩玩(原创),布布扣,bubuko.com

写个js 分页玩玩(原创)

标签:style   blog   class   c   code   java   

原文地址:http://www.cnblogs.com/zhudongchang/p/3739543.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!