zoukankan      html  css  js  c++  java

  • js分页的实现代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>index.html</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/page.js"></script>
    <link rel="stylesheet" type="text/css" href="css/page.css">
  </head>
  <body>
    <div class="page" name="page"></div>
  </body>
  <script type="text/javascript">
    function getPage(){
        page.refresh(page.pageNumber,page.pageCount);
    }
    page.init("getPage");
    page.refresh(1,100);
    </script>
</html>

    page.js

    var page = {
        pageNumber:1,
        pageCount:100,
        calls:[],
        target:{}
}
var EventUtil = {
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type] = handler;
            }
        },
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type] = null;
            }
        }
}
page.bindEvent = function(){
    var contents = document.getElementsByName("page");
    for(var i = 0; i< contents.length; i++) {
        if(contents[i].className = 'page') {
            page.target = contents[i];
        }
    }
    EventUtil.addHandler(page.target, "click", page.clickEventHandler);
};

page.clickEventHandler = function(event){
    
    var className = event.target.className;
    if(className =='page_num' || className == 'page_num more'){
        
        var pageNum = event.target.innerHTML;
        if(pageNum == '...'){
            pageNum = event.target.getAttribute("pageNum");
        }
        page.pageNumber = parseInt(pageNum);
        page.doCallBack();
        
    }else if(className == 'next_page'){
        
        if(page.pageNumber < page.pageCount){
            page.pageNumber++;
            page.doCallBack();
        }
        
    }else if(className == 'pre_page'){
        
        if(page.pageNumber > 1){
            page.pageNumber--;
            page.doCallBack();
        }
        
    }
}

page.refresh = function(pageNumber,pageCount){
    page.pageNumber = pageNumber;
    page.pageCount = pageCount;
    page.target.innerHTML = "";
    page.target.innerHTML = page.createPage();
}

page.createPage = function(){
    var html = [];
    
    html.push('<a class="page_num active">',page.pageNumber,'</a>');
    var i = page.pageNumber - 1;
    
    for(i;i > page.pageNumber - 2; i--){
        if(i >= 1){
            html.unshift('<a class="page_num">',i,'</a>');
        }
    }
    if(i>=1){
        html.unshift('<a class="page_num more" pageNum=',i,'>...</a>');
        html.unshift('<a class="page_num">',1,'</a>');
    }
    
    var j =  page.pageNumber + 1;
    for(j;j <= page.pageNumber + 1; j++){
        if(j <= page.pageCount){
            html.push('<a class="page_num">',j,'</a>');
        }
    }
    
    if(j <= page.pageCount)
    {
        html.push('<a class="page_num more" pageNum=',j,'>...</a>');
        html.push('<a class="page_num">',page.pageCount,'</a>');
    }
    
    html.unshift('<a class="pre_page">上一页</a>');
    html.push('<a class="next_page">下一页</a>');
    return html.join("");
}

page.doCallBack = function(){
    
    if(page.calls.length == 1 && window[page.calls[0]]){
        window[page.calls[0]]();
    }else if(page.calls.length == 2 && window[page.calls[0]][page.calls[1]]){
        window[page.calls[0]][page.calls[1]]();
    }else if (page.calls.length == 3 && window[page.calls[0]][page.calls[1]][page.calls[2]])
    {
        window[page.calls[0]][page.calls[1]][page.calls[2]]();
    }
    
}

page.init = function(callback){
    page.bindEvent();
    if(callback){
        page.calls = callback.split('.');
    }
}

    page.css

    /*分页*/
.page { margin:30px auto; width:310px;}
.page a{ padding:3px 5px; border:1px solid #000; color:#000; margin:0 1px;cursor: pointer;}
.page .more{ border:none; padding:3px 0; margin:0; position:relative; top:-3px;}
.page .active{ background:#000; color:#fff;}
.page a:first-child{ margin-left:0;}
  • 相关阅读:
    python3数据库配置,远程连接mysql服务器
    Ubuntu 16.04安装JDK
    用Python从零开始创建区块链
    理解奇异值分解SVD和潜在语义索引LSI（Latent Semantic Indexing）
    gensim介绍（翻译）
    记一次浅拷贝的错误
    Heap queue algorithm
    Python
    python列表中插入字符串使用+号
    Linux（Ubuntu）使用 sudo apt-get install 命令安装软件的目录在哪？
  • 原文地址：https://www.cnblogs.com/tongongV/p/14176626.html
Copyright © 2011-2022 走看看