公告:本站提供编程开发方面的技术交流与分享,打造最佳教程网,希望能为您排忧解难!

JS教程jQuery.pager分页插件源码

jQuery.pager分页插件源码

更新时间:2013-05-23 01:40:08|卓燚原创作品|

1

/**

3 * @author merauy@gmail.com

4 * @Copyright(c)2012~2014

5 * @version 1.0.0

6 * @direction jQuery分页插件

7 * @comment 支持ajax分页共、联动分页、纯静态分页功能

8 */

$.extend({

    pager:function(param){

11

12        var _isAppend = false;

        if(this === jQuery){

14            return new $.pager(param);

15        }

16

        for(var i in $.pagerSettings){

            eval(['this["set',

19            i.charAt(0).toUpperCase() ,

20            i.substr(1),

21            '"]=function(v){return this.setOption("',i,'",v)}'].join(''));

22        }

23

        this.toString = function(){

            if(this['styleType']){

26                return this.toString2();

27            }

28            var _pagerHtml = [];

29            var key = this._prepare().getRegisterKey();

          if(this.numsOption.length > 1){

31              //每页显示条数

32              _pagerHtml[_pagerHtml.length] = '<SPAN>\u6bcf\u9875\u663e\u793a\u6761\u6570</SPAN>';

33              _pagerHtml[_pagerHtml.length] = '<SELECT onchange="$.pagerChange('+key+',null,this.value);">';

              for(var i=0,j=this.numsOption.length;i<j;++i){

                  if(this.numsOption[i] == this.nums){

36                      _pagerHtml[_pagerHtml.length] =

37                          '<OPTION value="'+this.numsOption[i]+'" selected>'+this.numsOption[i]+'</OPTION>';

                  }else{

39                      _pagerHtml[_pagerHtml.length] =

40                          '<OPTION value="'+this.numsOption[i]+'">'+this.numsOption[i]+'</OPTION>';

41                  }

42              }

43              _pagerHtml[_pagerHtml.length] = '</SELECT>';

            }else{

45                //每页显示 + N + 条

46                _pagerHtml[_pagerHtml.length] =

47                    '<SPAN>\u6bcf\u9875\u663e\u793a'this.nums +'\u6761</SPAN>';

48            }

49

50          _pagerHtml[_pagerHtml.length] = '<SPAN>';

51          _pagerHtml[_pagerHtml.length] =

52              this.startNum + '\uff5e' + this.endNum + "/" + this.count;

53          _pagerHtml[_pagerHtml.length] = '</SPAN>';

          if(this.page==1){

55              //上一页

56              _pagerHtml[_pagerHtml.length] =

57                  '<span class="current prev">\u4e0a\u4e00\u9875</span>';

          }else{

59              _pagerHtml[_pagerHtml.length] =

60                  '<A href="#" onclick="return $.pagerChange('+key+','+this.prevPage+')">\u4e0a\u4e00\u9875</A>';

61            }

62

63            if(this.numberOfButtons){//如果指定了显示的按钮个数,那么就按此显示

64                var _fpage = this.page - Math.floor(this.numberOfButtons/2) ;

65                var _epage;

                if(_fpage < 1){

67                    _fpage =1 ;

68                    _epage = this.numberOfButtons;

                    if(_epage > this.pages){

70                        _epage = this.pages;

71                    }

                }else if(this.pages < this.page + this.numberOfButtons/2){

73                    _epage = this.pages ;

74                    _fpage = this.pages - this.numberOfButtons + 1 ;

                    if(_fpage < 1){

76                        _fpage = 1 ;

77                    }

                }else{

79                    _epage = _fpage + this.numberOfButtons -1 ;

80                }

81                _epage++ ;

                for(var i=_fpagei_epage ;++i){

                    if(i == this.page){

84                         _pagerHtml[_pagerHtml.length] = '<span class="current">' + this.page + '</span>' ;

                    }else{

86                        _pagerHtml[_pagerHtml.length] =

87                        '<a href="#" onclick="return $.pagerChange('+key+','i +')">' + i + '</a>' ;

88                    }

89                }

            }else{

91                _pagerHtml[_pagerHtml.length] = '<SELECT onchange="$.pagerChange('+key+',this.value);">';

              for(var i=1,j=this.pages+1;i<j;++i){

                  if(i==this.page){

94                      _pagerHtml[_pagerHtml.length] = '<OPTION value="'+i+'" selected>'+i+'</OPTION>';

                  }else{

96                      _pagerHtml[_pagerHtml.length] = '<OPTION value="'+i+'">'+i+'</OPTION>';

97                  }

98                }

99              _pagerHtml[_pagerHtml.length] = '</SELECT>';

100            }

101

          if(this.page!=this.nextPage){

103              //下一页

104                _pagerHtml[_pagerHtml.length] =

105                '<A href="#" onclick="return $.pagerChange('+key+','+this.nextPage+')">\u4e0b\u4e00\u9875</A>';

            }else{

107                _pagerHtml[_pagerHtml.length] = '<span class="current next">\u4e0b\u4e00\u9875</span>';

108            }

109            return _pagerHtml.join('');

110        };

111

        this.toString2 = function(){

113            var _pagerHtml = [];

114            var key = this._prepare().getRegisterKey();

115

            if(this.count <= this.nums){

117                return '' ;

118            }

119

            if(this.page > 1){

121                _pagerHtml[_pagerHtml.length] =

122                ['<a href="#" onclick="return $.pagerChange(',key,',',this.prevPage,')">&lt; Prev</a>'].join('');

            }else{

124                _pagerHtml[_pagerHtml.length] = '<span class="disabled">&lt; Prev</span>' ;

125            }

126

            if(this.pages <= 10){

                for(var i=1i <= this.pages++i){

                    if(i == this.page){

130                        _pagerHtml[_pagerHtml.length] = ['<span class="current">',i,'</span>'].join('');

                    }else{

132                        _pagerHtml[_pagerHtml.length] =

133                            ['<a href="#" onclick="return $.pagerChange(',key,','i ,')">',i,'</a>'].join('');

134                    }

135                }

136

            }else{

                if(this.page <=5){

                    for(var i = 1i<=7++i){

                        if(i == this.page){

141                            _pagerHtml[_pagerHtml.length] =

142                                ['<span class="current">',i,'</span>'].join('');

                        }else{

144                            _pagerHtml[_pagerHtml.length] =

145                                ['<a href="#" onclick="return $.pagerChange('

146                                ,key,','i ,')">',i,'</a>'].join('');

147                        }

148                    }

149                    _pagerHtml[_pagerHtml.length] =

150                        ['...<a href="#" onclick="return $.pagerChange('

151                        ,key,','this.pages-1 ,')">',(this.pages-1),'</a>'].join('');

152                    _pagerHtml[_pagerHtml.length] =

153                        ['<a href="#" onclick="return $.pagerChange('

154                        ,key,','this.pages ,')">',this.pages,'</a>'].join('');

                }else if(this.page >= this.pages - 4){

                    _pagerHtml[_pagerHtml.length] = [

157                        '<a href="#" onclick="return $.pagerChange('

158                        ,key,',1)">1</a>'

159                    ].join('');

                    _pagerHtml[_pagerHtml.length] = [

161                        '<a href="#" onclick="return $.pagerChange('

162                        ,key,',2)">2</a>...'

163                    ].join('');

                    for(var i=this.pages-6i<=this.pages++i){

                        if(i == this.page){

                            _pagerHtml[_pagerHtml.length] = [

167                                '<span class="current">',i,'</span>'

168                            ].join('');

                        }else{

                            _pagerHtml[_pagerHtml.length] = [

171                                '<a href="#" onclick="return $.pagerChange(',key,','i ,')">',i,'</a>'

172                            ].join('');

173                        }

174                    }

                }else{

                    _pagerHtml[_pagerHtml.length] = [

177                        '<a href="#" onclick="return $.pagerChange(',key,',1)">1</a>'

178                    ].join('');

                    _pagerHtml[_pagerHtml.length] = [

180                        '<a href="#" onclick="return $.pagerChange(',key,',2)">2</a>...'

181                    ].join('');

182

                    _pagerHtml[_pagerHtml.length] = [

184                        '<a href="#" onclick="return $.pagerChange(',key,','this.page-2 ,')">',(this.page-2),'</a>'

185                    ].join('');

                    _pagerHtml[_pagerHtml.length] = [

187                        '<a href="#" onclick="return $.pagerChange(',key,','this.page-1 ,')">',this.page-1,'</a>'

188                    ].join('');

                    _pagerHtml[_pagerHtml.length] = [

190                        '<span class="current">',this.page,'</span>'

191                    ].join('');

                    _pagerHtml[_pagerHtml.length] = [

193                        '<a href="#" onclick="return $.pagerChange(',key,','this.page+1,')">',(this.page+1),'</a>'

194                    ].join('');

                    _pagerHtml[_pagerHtml.length] = [

196                        '<a href="# onclick="return $.pagerChange(',key,','this.page+2 ,')"">',(this.page+2),'</a>'

197                    ].join('');

                    _pagerHtml[_pagerHtml.length] = [

199                        '...<a href="#" onclick="return $.pagerChange(',key,','this.pages-1 ,')">',(this.pages-1),'</a>'

200                    ].join('');

                    _pagerHtml[_pagerHtml.length] = [

202                        '<a href="#" onclick="return $.pagerChange(',key,','this.pages ,')">',this.pages,'</a>'

203                    ].join('');

204                }

205            }

206

            if(this.page < this.pages){

                _pagerHtml[_pagerHtml.length] = [

209                    '<a href="#" onclick="return $.pagerChange(',key,',',this.nextPage,')">Next &gt;</a>'

210                ].join('');

            }else{

212                _pagerHtml[_pagerHtml.length] = '<span class="disabled">Next &gt;</span>' ;

213            }

214

215            //也许有人会问:为什么用这么多.length,我只想说效率问题

216            //没有调研测试,就没有发言权

217            return _pagerHtml.join('');

218        };

219

        this._prepare = function(){

221            var anumsOption = this.numsOption ;

            if(anumsOption.length == 1){

223                this.nums = anumsOption[0] ;

            }else if(anumsOption.length > 1){

                if($.inArray(this.nums-0anumsOption) == -1){

226                    this.nums = anumsOption[0];

227                }

            }else if(this.nums < 1){

229                this.nums = 20 ;

230            }

231

232            this.pages = Math.ceil(this.count/this.nums);

            if(!this.pages){

234                this.pages = 1;

235            }

236

            if(this.page < 1){

238                this.page = 1;

            }else if(this.page > this.pages){

240                this.page = this.pages;

241            }

            if(this.count){

243                this.startNum = (this.page-1)*this.nums + 1 ;

244                this.endNum = this.page*this.nums ;

                if(this.endNum > this.count){

246                    this.endNum = this.count;

247                }

            }else{

249                this.startNum = this.endNum = 0;

250            }

251            this.prevPage = this.page > 1 ? (this.page-1) : 1;

252            this.nextPage = this.page < this.pages ? this.page-0+1 : this.pages;

            if(!this.ajax.url){

254                this.ajax.url = document.URL;

255            }

256            return this;

257        };

258

        this.setOption =function(option,value){

            if(typeof option == 'object'){

                for(var i in option){

262                    this.setOption(ioption[i]);

263                }

            }else if(option == 'ajax'){

265                $.extend(this.ajaxvalue);

            }else if(option == 'ajaxContainer'){

267                this.ajaxContainer = $(value);

            }else if(option == 'pageContainer'){

                if(this.pageContainer == $(this.pageContainer)){

270                    this.pageContainer.html('');

271                }

                if(_isAppend){

273                    this.pageContainer = $(value);

274                    this.reloadBar();

                }else{

276                    this.appendTo(value);

277                }

            }else{

279                this[option] = value;

280            }

281            return this;

282        };

283

        this.reloadBar = function(){

285            this.pageContainer.html(this.toString());

286            return this;

287        }

288

        this.reload = function(){

290            var _pageString = this.toString();

291            //如果指定需要异步刷新的内容块,就执行异步获取内容

            if(this.ajaxContainer){

293                var _this = this;

294                var ajax = this.ajax ;

295

                $.extend(ajax.data,{

297                    page:this.page,

298                    count:this.count,

299                    nums:this.nums

300                });

301

                $.ajax({

303                    url:ajax.url,

304                    data:ajax.data,

305                    cache:ajax.cache,

306                    type:ajax.type,

                    success:function(html){

                        if(_this.ajaxContainer === null){

                            if(typeof ajax['end'] == 'function'){

310                                ajax['end'].call(_this);

311                            }

312                            return ;

313                        }

314                        _this.ajaxContainer.html(html);

315                        _this.pageContainer.html(_pageString);

                        if(typeof ajax['end'] == 'function'){

317                            ajax['end'].call(_this);

318                        }

319                        _this = _pageString = ajax = null;

320                    },

                    error:function(XMLHttpRequesttextStatuserrorThrown){

322                        _this = _pageString = ajax = null;

323                        alert(textStatus+":"+errorThrown);

324                        throw '';

325                    }

326                });

            }else{

328                this.pageContainer.html(_pageString);

329            }

330

331            return this;

332        };

333

        this.getRegisterKey = function(){

            for(var i in $._pagers){

                if($._pagers[i] == this){

337                    return i;

338                }

339            }

340            return null ;

341        };

342

        this.hide = function(){

344            this.pageContainer.hide();

345            return this ;

346        };

347

        this.show = function(){

349            this.pageContainer.show();

350            return this ;

351        };

352

        this.remove = function(){

354            var k = this.getRegisterKey();

            if(k !== null){

                try{

357                    delete $._pagers[k];

                }catch(e){

359                    $._pagers[k] = null ;

360                }

361            }

362            this.pageContainer.html('');

363

            for(k in this){

365                this[k] = null ;

366            }

367        };

368

        this.appendTo = function(obj){

            if(_isAppend){

371                //值允许调用appendTo一次

372                throw '\u53ea\u5141\u8bb8\u5904\u7406\u4e00\u6b21';

373            }

374            _isAppend = true;

375            $._pagers.push(this) ;

376            return this.setOption('pageContainer'obj);

377        };

378

379        param = param || {};

380

381        var t;

382

383        $.extend(truethis, $.pagerSettings);

384

385        //如果没有设置每页显示的条数,那么就判断是否允许从COOKIE里面取值

        if(!param.nums && this.numsFromCookie){

387            t = $.cookie(this.numsCookieName);

            if(t){

389                param.nums = t;

390            }

391        }

392

393        if(t = param.pageContainer){//如果指定了显示的位置,等参数设置完毕后才进行显示

394            delete param.pageContainer ;

395        }

396

        for(var i in param){

398            this.setOption(iparam[i]);

399        }

400

        if(t){

402            this.setOption('pageContainer't);

403        }

404    },

    pagerSettings:{

406        page : 1,

407        nums : 20,

408        pages : 1,

409        count : 0,

410        numsOption : [10,20,50,100],

411        numsFromCookienull,

412        numsCookieName'_n',

413        numsCookieAutofalse,  //每页显示的条数是否自动根据当前的改变而改变

414        numberOfButtons:5,

415        styleType:0,            //样式类型,这里提供了两种显示模式

        ajax:{

417            url:document.URL//向后台请求的URL

418            type:'get',       //请求模式

419            data:{},          //请求数据

420            cache:true,       //是否缓存

421            before:null,      //分页条改变前调用的函数,注意:里面的参数是:分页的所有参数被改变前

422            end:null            //分页条改变后调用的函数

423        },

424        ajaxContainer:null,

425        pageContainer:null,

426        onchange:null       //注意:onchange事件和默认的触发事件这里只允许二选一,此优先级高

427    },

428    _pagers:[],

    pagerChange:function(keypagenumscount){

430        var pager = $._pagers[key] ;

        if(pager){

432            var isChange = page && pager.page != page ||

433             nums && pager.nums != nums ||

434             count && pager.count ;

            var dochange = function(){

                if(page && pager.page != page){

437                    pager.page = page ;

438                }

                if(nums && pager.nums != nums){

440                    pager.nums = nums ;

                    if(pager.numsCookieAuto){

442                        $.cookie(pager.numsCookieNamenums) ;

443                    }

444                }

                if(count && pager.count != count){

446                    pager.count = count ;

447                }

448                return pager;

449            };

450

            if(isChange){

                if($.isFunction(pager.onchange)){

453                    dochange().reload().onchange.apply(pager);

                }else if(pager.ajaxContainer){

                    if($.isFunction(pager.ajax.start) && pager.ajax.start.call(pagerpage) === false){

456                        return false;

457                    }

458                    dochange().reload();

                }else{

460                    dochange().pageContainer.html(pager.toString());

461                }

462            }

463        }

464        return false;

465    }

466});

467

最佳教程网

最大的技术交流平台 www.goodxyx.com© CopyRight 2011-2013, All Rights Reserved

浙ICP备11033019号