转：使用JAVASCRIPT分页V2.0beta版本

来源地址：http://www.phpobject.net/blog/

 今天花了一天的时间重新编写。
特点：
1、单纯JAVASCRIPT代码，不依赖任何其他的库类。
2、支持AJAX分页或者自定义URL模式。对ZF或者我的PHP的路由模式有很好的支持（index.php/pageid/1.htm）
3、支持多种显示模式。（简单的，类似百度的等等。）
4、制定自定义风格。
5、性能较好。
6、完全面对对象，支持继承。
7、能够自动解析URL获取当前页并自动设置URL参数
详细代码不解释，提供库类文件

 

  1 /**
  2  * js的分页类
  3  * @author : feifengxlq <feifengxlq#gmail.com>
  4  * @copyright : http://www.phpobject.net
  5 */
  6 function Pagebar(_total,_pagesize,_nowpage)
  7 {
  8   /**
  9    * 基本配置信息
 10   */
 11   this._pageName = 'pageid';
 12   this._nextPageText = '下一页';
 13   this._prePageText = '上一页';
 14   this._firstPageText = '首页';
 15   this._lastPageText = '尾页';
 16   this._preBarText = '<<';
 17   this._nextBarText = '>>';
 18   this._pageBarNum = 10;
 19   this._leftFormat = '[';
 20   this._rightFormat = ']';
 21   this._alwaysDisplay = true;//是否总是显示
 22   this._urlHeader = '';//设置URL头
 23 
 24   /**
 25    * 分页相关数据
 26   */
 27   this._total = 0;
 28   this._totalPage = 0;
 29   this._pageSize = 10;
 30   this._nowPage = 1;
 31   this._offset = 0;
 32   /**
 33    * 构造函数
 34   */
 35   this._init = function(){    
 36     this._total = parseInt(_total);
 37     this._pageSize = parseInt(_pagesize);
 38     if(_nowpage){
 39       this.setNowPage(_nowpage);
 40     }else{
 41       this._autoGetNowPage();
 42     }
 43   };  
 44   /**
 45    * 输出分页条
 46   */
 47   this.output = function()
 48   {
 49     document.write(this.getFirst() + this.getPreBar() + this.getPre() + this.getBar() + this.getNext() + this.getNextBar()  + this.getLast())
 50   }
 51   /**
 52    * 设置当前页面
 53   */
 54   this.setNowPage = function(_nowPageId)
 55   {
 56     this._nowPage = parseInt(_nowPageId);
 57     this._makePage();
 58   }
 59   /**
 60    * 设置当前URL头
 61   */
 62   this.setUrlHeader = function(_urlHeader)
 63   {
 64     this._urlHeader = _urlHeader;
 65   }
 66   /**
 67    * 自动获取当前的页面ID
 68   */
 69   this._autoGetNowPage = function()
 70   {
 71     var _urlStr = window.location.href;
 72     var _begin = _urlStr.indexOf('?');
 73     if(_begin!=-1)
 74     {
 75       //查找
 76       var _urlParams = _urlStr.substring(_begin+1).split('&');
 77       for(var i=0;i<_urlParams.length;i++)  
 78         {
 79         _urlParam = _urlParams[i].split("=");
 80         if(_urlParam[0]==this._pageName)
 81         {
 82           this._nowPage = parseInt(_urlParam[1]);
 83           break;
 84         } 
 85        }
 86       if(isNaN(this._nowPage))this._nowPage=1;
 87     }else{
 88       this._nowPage = 1;
 89     }
 90     this._makePage();
 91   }
 92   /**
 93    * 自动获取URL地址
 94   */
 95   this._autoGetUrl = function()
 96   {
 97     var _urlStr = window.location.href;
 98     var _begin = _urlStr.indexOf('?');
 99     if(_begin!=-1)
     {
       _tStr = this._pageName + '=' + this._nowPage;
       _beign = _urlStr.indexOf(_tStr);
       if(_beign!=-1)
       {
         _tstrLen = _tStr.length;
         if( (_urlStr.substring(_begin,_begin+1)=='&')&&(_urlStr.substring(_beign+_tstrLen,_beign+_tstrLen+1)=='&') )
         {
           _urlStr = _urlStr.substring(0, _beign-1) + _urlStr.substring(_beign+_tstrLen, _urlStr.length); 
         }else if( (_urlStr.substring(_begin,_begin+1)=='?')&&(_urlStr.substring(_beign+_tstrLen,_beign+_tstrLen+1)=='&') )
         {
           _urlStr = _urlStr.substring(0, _beign) + _urlStr.substring(_beign+_tstrLen+1, _urlStr.length); 
         }else if( (_urlStr.substring(_begin,_begin+1)=='?')&&(_urlStr.substring(_beign+_tstrLen,_beign+_tstrLen+1)=='') ){
           return _urlStr.substring(0, _beign);
         }else{
           _urlStr = _urlStr.substring(0, _beign) + _urlStr.substring(_beign+_tstrLen, _urlStr.length); 
         }
       }
       _urlStr += '&';
     }else{
       _urlStr += '?';
     }
     return _urlStr;
   }
   /**
    * 获取偏移量
   */
   this.getOffset = function(){
     return this._offset;
   };
   /**
    * 获取首页
   */
   this.getFirst = function(_className,_nowPageNoLink)
   {
     if(typeof _nowPageNoLink == 'undefined')_nowPageNoLink = false;
     if(this._total == 0)return '';
     if( (this._nowPage == 1)&&(_nowPageNoLink) ) return this.getNoLinkItem(1,_className,this._firstPageText);
     return this.getLinkItem(1,_className,this._firstPageText);
   };
   /**
    * 获取尾页
   */
   this.getLast = function(_className,_nowPageNoLink)
   {
     if(typeof _nowPageNoLink == 'undefined')_nowPageNoLink = false;
     if(this._total == 0)return '';    
     if( (this._nowPage == this._totalPage)&&(_nowPageNoLink) ) return this.getNoLinkItem(this._totalPage,_className,this._lastPageText);
     return this.getLinkItem(this._totalPage,_className,this._lastPageText);
   };
   /**
    * 获取分页条
   */
   this.getBar = function(_className,_nowPageClassName,_nowPageNoLink)
   {
     if(typeof _nowPageNoLink == 'undefined')_nowPageNoLink = false;
     if(this._total == 0)return '';    
     
     _plus = Math.ceil(this._pageBarNum/2);
       if( this._pageBarNum - _plus + this._nowPage > this._totalPage )
         _plus = (this._pageBarNum - this._totalPage + this._nowPage);
         _begin = this._nowPage - _plus + 1;
         _begin = (_begin>=1)?_begin:1;
         
         var _return = '';
         var _tmpPageText = ''; 
         for(var _i = _begin ; _i < _begin + this._pageBarNum ; _i ++) 
         { 
           if(_i <= this._totalPage){
             _tmpPageText = this._leftFormat + _i + this._rightFormat;     
             if(_i == this._nowPage){
               if(_nowPageNoLink){
                 _return += this.getNoLinkItem(_i,_nowPageClassName,_tmpPageText);
               }else{
                 _return += this.getLinkItem(_i,_nowPageClassName,_tmpPageText);
               }
             }else{
           _return += this.getLinkItem(_i,_nowPageClassName,_tmpPageText);
             }
             }else{ 
                 break; 
             } 
         }
         return _return; 
   };
   /**
    * 获取上一页
   */
   this.getPre = function(_className,_alwaysDisplay)
   {
     if(typeof _alwaysDisplay == 'undefined')_alwaysDisplay = this._alwaysDisplay;//是否总是显示
     if(this._total == 0)return '';
     if( (_alwaysDisplay)||(this._nowPage>1) )return this.getLinkItem(this._nowPage-1,_className,this._prePageText);
     return '';
   };
   /**
    * 获取下一页
   */
   this.getNext = function(_className,_alwaysDisplay)
   {
     if(typeof _alwaysDisplay == 'undefined')_alwaysDisplay = this._alwaysDisplay;//是否总是显示
     if(this._total == 0)return '';
     if( (_alwaysDisplay)||(this._nowPage<this._totalPage) )return this.getLinkItem(this._nowPage+1,_className,this._nextPageText);
     return '';
   }
   /**
    * 获取下一分页条
   */
   this.getNextBar = function(_className,_alwaysDisplay)
   {
     if(typeof _alwaysDisplay == 'undefined')_alwaysDisplay = this._alwaysDisplay;//是否总是显示，默认总是显示
     if( (_alwaysDisplay)||(this._nowPage<this._totalPage) ) 
     {
       _pageno = this._nowPage + this._pageBarNum;
       if(_pageno>this._totalPage) _pageno = this._totalPage;
       return this.getLinkItem(_pageno,_className,this._nextBarText)
     }
     return '';
   }
   
   /**
    * 获取上一分页条
   */
   this.getPreBar = function(_className,_alwaysDisplay)
   {
     if(typeof _alwaysDisplay == 'undefined')_alwaysDisplay = this._alwaysDisplay;//是否总是显示，默认总是显示
     if( (_alwaysDisplay)||(this._nowPage>1) )
     {
       _pageno = this._nowPage - this._pageBarNum;
       if(_pageno<1) _pageno = 1;
       return this.getLinkItem(_pageno,_className,this._preBarText)
     }
     return '';
     
   }
   /**
    * 生成URL
   */
   this.getUrl = function(_pageid)
   {
     if(this._urlHeader=='')this._urlHeader = this._autoGetUrl();
     return this._urlHeader + this._pageName + '=' + _pageid;
   };
   /**
    * 获取分页项
   */
   this.getLinkItem = function(_pageid,_className,_pageText)
   {
     return '<a href="' + this.getUrl(_pageid) + '" class="' + _className + '">' + _pageText + '</a>';
   };
   /**
    * 获取没有分页链接的项
   */
   this.getNoLinkItem = function(_pageid,_className,_pageText)
   {
     return this.getLinkItem(_pageid,_className,_pageText);
   };
   
   this._makePage = function()
   {
     if(isNaN(this._total))return this._error('total不是一个有效的数字');
     if(isNaN(this._pageSize))return this._error('pagesize不是一个有效的数字');
     if(isNaN(this._nowPage))return this._error('nowpage不是一个有效的数字');
     this._totalPage = Math.ceil(this._total/this._pageSize);
     this._offset = 0;
     if( (this._nowPage>0)&&(this._nowPage<=this._totalPage) ){
       this._offset = (this._nowPage-1)*this._pageSize;
     }
   };
   this._error = function (msg)
   {
     alert(msg);
     return false;
   };
   
   this._init();
 }

 

 

 

 

提供一个简单的AJAX测试代码。（注意：测试代码需要jquery支持）

 1 <div id="ajaxPageTest"></div>
 2 <script type="text/javascript">
 3 function ajaxPageBar(_total,_pagesize)
 4 {
 5   this.base = Pagebar;
 6   this.base(_total,_pagesize);
 7   
 8   this._ajaxName = 'ajax_page';
 9   
   this.getUrl = function(pageid)
   {
     return 'javascript:'+ this._ajaxName +'(' + pageid + ')';
   }
   
   this.output = function()
   {
     return this.getFirst() + this.getPreBar() + this.getPre() + this.getBar() + this.getNext() + this.getNextBar()  + this.getLast()
   }
 }
 
 var page = new ajaxPageBar(1000,10);
 page._ajaxName = 'ajax_test'
 function ajax_test(pid)
 {
   page.setNowPage(pid)
   $('#ajaxPageTest').html(page.output());
 }
 $(function(){
   ajax_test(1)
 })
 </script>
 
 

 另外提供简单的常用测试代码

 <script type="text/javascript">
 var normalPageBar = new Pagebar(1000,20);
 normalPageBar.output();
 </script>