zoukankan      html  css  js  c++  java
  • 分页代码

    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='#"+num+"' class='"+cls+"'>"+num+"</a>";
                }else{
                    str = "<a href='#"+num+"'>"+num+"</a>";
                }
                return str;
            }
     
            //Current page is greater than 1 shows previous page
            if (currentNum > 0) {
                strpage = "<a href='#1'>首页</a>";
                obj.append(strpage);
            }
            if (currentNum > 1) {                
                strpage = "<a href='#"+ ( 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='#'>...</a>";
                obj.append(strpage);
            }http://www.bizhizu.cn/linglei/​
     
            if ((totalNum - currentNum) >= 1) {
                 
                strpage = "<a href='#"+ ( currentNum + 1 ) +"'>>></a>";
                obj.append(strpage);另类图片
                strpage = "<a href='#" + (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; 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>
  • 相关阅读:
    C#利用反射动态调用类及方法
    系统程序监控软件
    SQL server 2008 安装和远程访问的问题
    sql server 创建临时表
    IIS 时间问题
    windows 2008 安装 sql server 2008
    sql server xml nodes 的使用
    Window 7sp1 安装vs2010 sp1 打开xaml文件崩溃
    CSS资源网址
    Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, Version=3.0.0.0
  • 原文地址:https://www.cnblogs.com/xkzy/p/3964663.html
Copyright © 2011-2022 走看看