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>
  • 相关阅读:
    Tensorflow 2.0 学习资源
    SpagoBI 教程 Lesson 5: Creating a dashboard with BIRT and SpagoBI
    SpagoBI 教程 Lesson 4: BIRT Reports
    SpagoBI 教程 Lesson 3: Highchart Dashboards
    SpagoBI 教程 Lesson 2: OLAP with JPIVOT
    SpagoBI 教程 Lesson 1:Introduction and Installation
    Oracle system表空间满的暂定解决方法
    运算符重载_继承_多态_模版
    成员函数返回的是对象和引用的区别(转)
    String类型_static成员_动态内存分配_拷贝构造函数_const关键字_友元函数与友元类
  • 原文地址:https://www.cnblogs.com/xkzy/p/3964663.html
Copyright © 2011-2022 走看看