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

    /*

      curPage: 当前页              数字[必须]
      countPage: 总共多少页         数字[必须]
      para:  代表页码的关键字 字符串[可省略,如省略则默认代表页码的关键字为page] 比如: "pag"

        用法举例:
            new page(5, 60, "pag");
                5                   当前页码
                60                      总共多少页
                "pag"               分页的关键字
    */
    function page(curPage, countPage, para){
        if(isNaN(parseInt(curPage)) || isNaN(parseInt(countPage)))return;
        curPage = parseInt(curPage);
        countPage = parseInt(countPage);
        curPage = curPage<1 ? 1 : curPage;
        countPage = countPage<1 ? 1 : countPage;
        curPage = curPage > countPage? countPage : curPage;
        this.co = countPage;
        this.para = para || 'page';
        this.pa = ['<table cellspacing="4" cellpadding="1"><tbody><tr align="center">'];
        if(countPage<10){
            this.deal('<td class="page"><a href="{para}">{page}</a></td>', 1, curPage);
            this.pa.push('<td class="page2"><strong>'+curPage+'</strong></td>');
            this.deal('<td class="page"><a href="{para}">{page}</a></td>', curPage+1, countPage+1);
        }else{
          if(curPage <= 5){
              this.deal('<td class="page"><a href="{para}">{page}</a></td>', 1, curPage);
              this.pa.push('<td class="page2"><strong>'+curPage+'</strong></td>');
              this.deal('<td class="page"><a href="{para}">{page}</a></td>', curPage+1, 10);
              this.deal('<td class="page"><a title="下十页" href="{para}"><img src="sfc_files/Next.gif" width="8" height="8" border="0" /></a></td>', (curPage+9>countPage?countPage:curPage+9));
              this.deal('<td class="page"><a title="尾页" href="{para}"><img src="sfc_files/Last.gif" width="9" height="8" border="0" /></a></td>', countPage);
          }else if(curPage>=(countPage-3)){
              this.deal('<td class="page"><a title="第一页" href="{para}"><img src="sfc_files/First.gif" width="8" height="8" border="0" /></a></td>', 1);
              this.deal('<td class="page"><a title="上十页" href="{para}"><img src="sfc_files/Previous.gif" width="9" height="8" border="0" /></a></td>',  (curPage-9<1?1:curPage-9));
              this.deal('<td class="page"><a href="{para}">{page}</a></td>', (curPage-8)+(countPage-curPage) , curPage);
              this.pa.push('<td class="page2"><strong>'+curPage+'</strong></td>');
              this.deal('<td class="page"><a href="{para}">{page}</a></td>', curPage+1, countPage+1);
          }else{
              this.deal('<td class="page"><a title="第一页" href="{para}"><img src="sfc_files/First.gif" width="8" height="8" border="0" /></a></td>', 1);
              this.deal('<td class="page"><a title="上十页" href="{para}"><img src="sfc_files/Previous.gif" width="9" height="8" border="0" /></a></td>',  (curPage-9<1?1:curPage-9));
              this.deal('<td class="page"><a href="{para}">{page}</a></td>', curPage-4, curPage);
              this.pa.push('<td class="page2"><strong>'+curPage+'</strong></td>');
              this.deal('<td class="page"><a href="{para}">{page}</a></td>', curPage+1, curPage+5);
              this.deal('<td class="page"><a title="下十页" href="{para}"><img src="sfc_files/Next.gif" width="8" height="8" border="0" /></a></td>', (curPage+9>countPage?countPage:curPage+9));
              this.deal('<td class="page"><a title="尾页" href="{para}"><img src="sfc_files/Last.gif" width="9" height="8" border="0" /></a></td>', countPage);
          }
        }
        var id = Math.random().toString().substr(3,5);
        this.deal('<td><input class="tabletitle1" id="page_num_'+id+'" url="{para}" style="30px;" size="2" value="1" name="page" /></td>', 99999999);
        this.pa.push('<td><input class="tabletitle1" type="button" value="GO" onclick="page.go(\'page_num_'+id+'\')" /></td>');
        this.pa.push('</tr></tbody></table>');
        document.write(this.pa.join(''));
        this.pa = null;
    }
    page.go = function(o){
        o = document.getElementById(o);
        o.value = o.value.replace(/[^\d]*/g, '') || 1;
        location.href = o.url.replace(/99999999/g, o.value);
    }
    page.prototype.deal = function(c, d, e){
        e = e || d+1;
        for(;d<e;d++){
            this.pa.push(c.replace(/\{para\}/g, this.url.set(location.href, this.para, d)).replace(/\{page\}/g, d));
        }
    }
    page.prototype.url = {
        set : function(url, p, v){
            var o = {};
            url = url.split("?");
            if (url.length>1){
                var a = url[1].split("&");
                for (var i=0;i<a.length;i++){
                    var s = a[i].split("=");
                    o[s[0]] = s[1];
                }
                o[p] = v;
                var a = [];
                for (var i in o){
                    a.push(i+"="+o[i]);
                }
                return url[0] + "?" + a.join("&");
            }
            return url[0]+'?'+p+'='+v;
        }
    }

    pageIndex=Request.Params["page"];
    <SCRIPT language=javascript>new page("+pageIndex+","+recordCount.ToString()+@",'page');</SCRIPT>


  • 相关阅读:
    js数据类型的转换
    个人总结css中的四种position定位
    c3和js写的切割轮播图 喜欢宋仲基的妹子汉子们来,观看效果需要引入jQuery^^
    立体骰子(css3和js)
    友善串口调试助手
    Pixhawk之调试方法
    深度学习论文笔记:Deep Residual Networks with Dynamically Weighted Wavelet Coefficients for Fault Diagnosis of Planetary Gearboxes
    Sublime Text 插件之常用20个插件
    lll
    浅谈jQuery的对象构成1
  • 原文地址:https://www.cnblogs.com/xsmhero/p/1584918.html
Copyright © 2011-2022 走看看