前端分页效果 

基于前台的分页效果。
在线预览：http://baixuexiyang.github.io/pagination/

项目地址：https://github.com/baixuexiyang/pagination

示例二：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试多分页</title>
    <style type="text/css">
    body{
        font-family: 'Microsoft YaHei';
    }
    .page-totalpage{
        text-align: right;
    }
    .page-ul{
        text-align: right;
    }
    .page-ul li:not(.jump-page):not(.page-record){
        width: 35px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        display: inline-block;
        margin-top: 5px;
        background-image: linear-gradient(45deg,#fdfdfd,#f7f7f7);
        border: 1px solid #dddddd;
        font-weight: bold;
        border-radius: 2px; 
        color: #556270;
        cursor: pointer;
        margin-right: 10px;
        list-style: none;
    }
    .page-ul li:not(.jump-page):not(.page-record):hover{
        border: 1px solid #43505e;
        border-radius: 2px;
        background-image: linear-gradient(45deg,#535f6d,#454e59);
        color: #fff;
    }
    .jump-page{
        display: inline-block;
    }
    .page-text{
        width: 22px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 0 5px;
        padding: 0;
        vertical-align: text-top;
    }
    ul.page-ul>li.active{
        border: 1px solid #43505e !important;
        border-radius: 2px !important;
        background-image: linear-gradient(45deg,#535f6d,#454e59) !important;
        color: #fff !important;
    }
    ul.page-ul>li.disable{
        color: #ccc !important;
        cursor: not-allowed !important;
    }
    ul.page-ul li.disable:hover{
        border: 1px solid #dddddd !important;
        color: #ccc !important;
        background-image: none !important;
        cursor: not-allowed !important;
    }
    .jump-page a{
        text-decoration: none;
        color: #43505e;
        font-weight: bold;
    }
    .jump-page a:hover{
        text-decoration: underline;
    }
    .page-record{
        display: inline-block;
        padding: 0 10px;
        color: #43505e;
        font-weight: bold;
    }


    </style>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
</head>
<body onselectstart="return false">

    <div id="page-content-1"></div>
    <hr>
    <div id="page-content-2"></div>
    <hr>
    <div id="page-content-3"></div>
</body>

<script type="text/javascript">
;(function($){

    function getPageList(currentPage,totalPage){
        var pageList = new Array();
        if(totalPage<=5){
            for(var i = 0;i < totalPage; i++){
                pageList[i] = i+1;
            }
        }else{
            if(currentPage <= 2){
                for(var i = 0;i < 5;i++){
                    pageList[i] = i + 1;
                }
            }
            else if(currentPage > totalPage-2){
                for(var i = 0;i < 5;i++){
                    pageList[i] = totalPage - 4 + i;
                }
            }
            else{
                for(var i = 0;i<5;i++){
                    pageList[i] = currentPage - 2 + i;
                }
            }
        }
        return pageList;
    }

    function getPageHtml(idNum,totalPage,pageList){

        var strHtml = "<div id='page-totalpage-"+idNum+"' class='page-totalpage'>共<span>"+totalPage+"</span>条记录</div>"
            strHtml += "<ul id='page-ul-"+idNum+"' class='page-ul'>";
            strHtml += "<li class='font-page' id='font-page-"+idNum+"' data-page-num='1'><span>首页</span></li>";
            strHtml += "<li class='forward-page' id='forward-page-"+idNum+"'><span>&lt;</span></li>";
        for(var i = 0;i<pageList.length;i++){
            strHtml += "<li class='page-"+pageList[i]+"'><span>"+pageList[i]+"</span></li>";
        }
            strHtml += "<li class='backward-page' id='backward-page-"+idNum+"'><span>&gt;</span></li>";
            strHtml += "<li class='last-page' id='last-page-"+idNum+"' data-page-num="+totalPage+"><span>尾页</span></li>";
            strHtml += "<li class='page-record'></li>";
            strHtml += "<li class='jump-page'><span>转到<input type='text' class='page-text'>页 <a href='javascript:void(0);'>Go</a> </span></li></ul></div>";
        return strHtml;
    }

    function setPage($this,idNum,currentPage,totalPage){
        var forward_page_disable = null,
            backward_page_disable = null;

        $this.empty();
        var list = getPageList(currentPage,totalPage);
        $this.append(getPageHtml(idNum,totalPage,list));
        
        $this.find(".page-"+currentPage).addClass("active");
        $this.find(".page-record").text(currentPage+"/"+totalPage);

        currentPage == 1 ? forward_page_disable = true : forward_page_disable = false ;
        currentPage == totalPage ? backward_page_disable = true : backward_page_disable = false;
        if(forward_page_disable){
            $("#forward-page-"+idNum).addClass("disable");
        }else{
            $("#forward-page-"+idNum).removeClass("disable");
        }
        if(backward_page_disable){
            $("#backward-page-"+idNum).addClass("disable");
        }else{
            $("#backward-page-"+idNum).removeClass("disable");
        }

        function setHash(hash,id,p){
            if(hash == ''){
                window.location.hash = "#id="+id+"&page="+p;
            }else{
                var hashList = hash.split("#");
                var hash_ = '';
                for(var i = 1;i<hashList.length;i++){
                    var id_ = hashList[i].split("&")[0].split("=")[1];
                    if(id == id_){
                        hash_ = "#"+hashList[i];
                    }
                }
                if(hash_!=''){
                    hash = hash.replace(hash_,"#id="+id+"&page="+p);
                }else{
                    hash += "#id="+id+"&page="+p;
                }
                window.location.hash = hash;
            }
        }

        setHash(window.location.hash,$this.attr("id"),currentPage);
    
    }

    $.fn.initPaging = function(opt){
        var id = new Date().getTime();
        var optDeafault = {
            idNum: id,
            totalPage: 10,
            currentPage: 1,
            pageResides: false,
            func: function($div_content,currentPage,idNum){
                console.log('默认函数');
                console.log("三个参数,第一个是分页组件的父容器，第二个是当前页数，第三个是组件的idNum");
                console.log("分页idNum为 "+idNum+" 的父容器是：<br>")
                console.log($div_content);
                console.log("分页idNum为 "+idNum+" 的当前页数是："+currentPage);
                console.log("-------------------------------------------------------------");
            }
        };
        var op = $.extend(optDeafault,opt);
        if(op.pageResides){
            var hash = window.location.hash;
        
            if(hash == '' ){
                setPage($(this),op.idNum,op.currentPage,op.totalPage);
            }else{
                var hashList = hash.split("#");
                var currentPage = op.currentPage;
                
                for(var i = 1;i<hashList.length;i++){
                    var id_ = hashList[i].split("&")[0].split("=")[1];
                    if($(this).attr("id") == id_){
                        currentPage = hashList[i].split("&")[1].split("=")[1];
                        break;
                    }
                }

                setPage($(this),op.idNum,currentPage,op.totalPage);
            }
        }else{
            setPage($(this),op.idNum,op.currentPage,op.totalPage);
        }
        
        $(this).after("<div style='display:none'>"+op.func+"</div>");
        
        return $(this);
    }


    $(window.document).on("click",".page-ul>li:not(.jump-page,.page-record)",function(){
        if($(this).attr('class').indexOf("disable") >= 0){
            return;
        }
        else{
            var div_content = $(this).parent().parent();
            var text = $(this).text().trim();
            var idNum = $(this).parent().attr("id").split("-")[2];

            if(text == '首页'){
                currentPage = 1;
            }
            else if(text == '尾页'){
                currentPage = parseInt($(this).attr("data-page-num"));
            }
            else if(text == '<'){
                currentPage = parseInt(div_content.find(".active").text().trim())-1;
            }
            else if(text == '>'){
                currentPage = parseInt(div_content.find(".active").text().trim())+1;
            }
            else{
                currentPage = parseInt(text);
            }
            var totalPage = parseInt($("#page-totalpage-"+idNum+" span").text().trim());
            
            setPage(div_content,idNum,currentPage,totalPage);
            
            var s = div_content.next().text();
            var f = new Function("return "+s);
            f()(div_content,currentPage,idNum);
        }

    });

    $(window.document).on("click",".jump-page a",function(){

        var text = parseInt($(this).prev().val().trim());
        var div_content = $(this).parents(".page-ul").parent();
        var totalPage = div_content.find(".page-totalpage span").text();
    
        if( text>0 && text<= totalPage){
            var idNum = div_content.find(".page-totalpage").attr("id").split("-")[2];
            var currentPage = text;
            setPage(div_content,idNum,currentPage,totalPage);
            
            div_content.find('.page-text').val(currentPage);
            
            var s = div_content.next().text();
            var f = new Function("return "+s);
            f()(div_content,currentPage,idNum);
        }
    });

    $(window.document).on("keydown",".page-text",function(e){
        if(e.keyCode == 13){
            $(this).next().trigger("click");
        }
        
    })

})(jQuery)
</script>
<script type="text/javascript">
    $("#page-content-1").initPaging({
        idNum: 1,
        totalPage: 18,
        currentPage: 1,
        pageResides: true,
        func: function($div_content,currentPage){
            console.log('自定义当前分页函数');
            console.log($div_content);
            console.log('第一个分页的函数当前跳转页：'+currentPage);
            console.log("-------------------------------------------------------------");
        }
    });

    $("#page-content-2").initPaging({
        idNum: 2,
        totalPage: 4,
        currentPage: 1,
        func: function(){
            alert('第二个分页的函数:guojia-2');
        }
    });

    $("#page-content-3").initPaging();

    if(window.location.hash != ''){
        console.log(window.location.hash)
    }

</script>
</html>


 










 







            

            
posted @ 
2016-03-14 13:52 
侠岚之弋痕夕 
阅读(395) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    



	

	

	
	

	

	

	





    

        

Where is the starting point, we don't have a choice, but the destination where we can pursue!