zoukankan      html  css  js  c++  java
  • 写个js 分页玩玩(原创)

    <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>
      
  • 相关阅读:
    leetcode_268.missing number
    leetcode_41. First Missing Positive_cyclic swapping
    cyclic swapping algorithm
    leetcode_919. Complete Binary Tree Inserter_完全二叉树插入
    前端的图片隐写术
    C#读取串口数据实现无线手柄操作ROV
    通过android传感器控制ROV云台转动
    C#实现的简易多人聊天室
    ARM Cortex M3指令集
    ODbgscript 1.82.x Document
  • 原文地址:https://www.cnblogs.com/zhudongchang/p/3739543.html
Copyright © 2011-2022 走看看