首页 > 代码库 > 分页代码

分页代码

1. [图片] G62}3G()`FGX(8)8SVL`S23.jpg    


?2. [代码][JavaScript]代码     

/*!
 * jQuery initPage        
 * Author:zdyue
  
*/
$.extend({
    //obj:分页对象;  currentNum:当前页;  totalNum:总页数;  callBackEvent:回调函数
    initPage : function(options){
 
        if(!options.obj){ return false; };
        var obj = $(options.obj); 
        var currentNum = options.currentNum || 1; 
        var totalNum = options.totalNum || 5; 
        var callBackEvent = options.callBackEvent || function(){};
        var strpage = "";
     
        function ele(num, cls){
            var str = "";
            if(cls){
                str = "<a href=http://www.mamicode.com/‘#"+num+"‘ class=‘"+cls+"‘>"+num+"</a>";
            }else{
                str = "<a href=http://www.mamicode.com/‘#"+num+"‘>"+num+"</a>";
            }
            return str;
        }
 
        //Current page is greater than 1 shows previous page
        if (currentNum > 0) {
            strpage = "<a href=http://www.mamicode.com/‘#1‘>首页";
            obj.append(strpage);
        }
        if (currentNum > 1) {                
            strpage = "<a href=http://www.mamicode.com/‘#"+ ( currentNum - 1 ) +"‘><<</a>";
            obj.append(strpage);
        }
         
        if(totalNum <= 5){
            for(var i=1; i<=totalNum; i++){
                if(currentNum == i){
                    strpage = ele(i, "now");
                }else{
                    strpage = ele(i);
                }
                obj.append(strpage);
            }
        }else{
            for(var i=1; i<=5; i++){
                if(currentNum == 1 || currentNum == 2){
                    if(currentNum == i){
                        strpage = ele(i, "now");
                    }else{
                        strpage = ele(i);
                        
                    }
                    
                }else if( (totalNum - currentNum) == 0 || (totalNum - currentNum) == 1 ){
                    if( (totalNum - currentNum) == 0 && i == 5){
                        strpage = ele( (totalNum - 5 + i), "now");
                    }else if( (totalNum - currentNum) == 1 && i == 4){
                        strpage = ele( (totalNum - 5 + i), "now");
                    }else{
                        strpage = ele( totalNum - 5 + i );
                    }
                }else{
                    if(i == 3){
                        strpage = ele(currentNum-3+i, "now");
                    }else{
                        strpage = ele(currentNum-3+i);
                    }
                }
                  
                obj.append(strpage);
                  
               
            }
        }
        if ((totalNum - currentNum) >= 2) {
            strpage = "<a href=http://www.mamicode.com/‘#‘>...";
            obj.append(strpage);
        }http://www.bizhizu.cn/linglei/?
 
        if ((totalNum - currentNum) >= 1) {
             
            strpage = "<a href=http://www.mamicode.com/‘#"+ ( currentNum + 1 ) +"‘>>></a>";
            obj.append(strpage);另类图片
            strpage = "<a href=http://www.mamicode.com/‘#" + (totalNum) + "‘>末页</a>";
            obj.append(strpage);
        }
     
        callBackEvent(currentNum, totalNum);
 
        obj.find("a").click(function(){
            var currentNum = parseInt($(this).attr("href").substring(1));
            obj.html("");
            $.initPage({
                obj : "#page",
                currentNum : currentNum,
                totalNum : totalNum,
                callBackEvent :callBackEvent
            });
            return false;
        });
 
    }
})
3. [代码]调用     

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>分页</title>
<style>
 
html,body{ margin:0 auto; text-align:center; }
.main{ font:12px/24px "Microsoft YaHei"; height:1000px; }
#page{ margin:100px auto; width:960px; text-align:center; }
#page a{ text-decoration:none; display:inline-block; height:24px; padding:0 8px; border-radius:3px; background-color:#DEF39E; color:#8CAC2C; text-align:center; margin:0 2px; }
#page a:hover,#page .now{ background-color:#8CAC2C; color:#fff; transition:all .5s ease 0s; }
</style>
</head>
<body>
    <div id="main">
        <div id="page">
            
        </div>
        <div> <a  class="back">1-20 </a></div>
            </div>
</body>
</html>
<script>
    $(function () {
        $.initPage({
            obj: "#page",
            currentNum: 1,
            totalNum: 20,
            callBackEvent: function (now, all) {
                $(".back").html(now + "-" + all);
            }
        });
    });
    
    </script>

分页代码