javascript 分页

2024-04-27 14:05:24

字体：大中小

来源：转载

供稿：网友

01 /*

`02`	`分页控件（DEVIN 2011年02月16日）`

03

04 模版说明：

`05`	`标准中文：<span>共：{RecordCount}条 {PageSize}条/页 {CurrentPage}页/{PageCount}页</span> {List}`

`06`	`标准英文：<span>Page {CurrentPage} of {PageCount} ({RecordCount} items) PageSize：{PageSize}</span> {List}`

`07`	`使用说明：Global 参数 cn\|en 中文\|英文`

08 标记说明：

`09`	`{RecordCount}：总记录数，对应参数：RecordCount`

`10`	`{PageSize} ：分页数，对应参数：PageSize`

`11`	`{CurrentPage}：当前页，对应参数：CurrentPage`

`12`	`{PageCount} ：总页数，无须输入，自动计算`

`13`	`{List} ：分页模版，分页详细显示链接`

14 参数说明：

`15`	`RecordCount ：总记录数`

`16`	`CurrentPage ：当前页`

`17`	`PageSize ：分页数`

`18`	`ControlId ：代码容器ID`

`19`	`Attach ：附加参数（以 , 开头，多个以 , 分隔，字符串用''隔开）例：",2"，"2,'中国'"`

`20`	`Template ：可按模版说明编辑模版，为空或无则使用标准模版`

`21`	`Global ：语言，cn\|en 中文\|英文`

`22`	`Callback ：脚本方法`

23 */

`24`	`String.PRototype.format =` `function() {`

`25`	`var` `args = arguments;`

`26`	`return` `this.replace(//{(/d+)/}/g,` `function(m, i) {`

`27`	`return` `args[i];`

28 });

29 };

`30`	`String.prototype.urlParameterClear =` `function() {`

`31`	`var` `url = location.href.replace(new` `RegExp(this` `+` `"=[^&]*",` `"gi"),` `"").replace(/&&/g,` `"&").replace(//?&/,` `"?");`

`32`	`return` `!url.match(//?/g) ? url +` `"?"` `: !url.match(/(&\|/?)$/) ? url +` `"&"` `: url;`

33

34 };

`35`	`String.prototype.urlRequst =` `function() {`

`36`	`var` `url = location.href;`

`37`	`var` `str =` `"[/?&]"` `+` `this` `+` `"=([^&]*)";`

`38`	`var` `re =` `new` `RegExp(str,` `"gi");`

`39`	`if` `(!re.test(url))` `return` `"";`

`40`	`re.exec(url);`

`41`	`return` `RegExp.$1;`

42

43 };

`44`	`function` `Pagination(ini) {`

`45`	`var` `$ =` `this;`

`46`	`for` `(var` `o` `in` `ini) {`

`47`	`$[o] = ini[o];`

48 }

`49`	`var` `en = $.Global && $.Global ==` `'en';`

`50`	`$.Template = $.Template ? $.Template : !en ?` `'<span>共：{RecordCount}条 {PageSize}条/页 {CurrentPage}页/{PageCount}页</span> {List}'` `:` `'<span>Page {CurrentPage} of {PageCount} ({RecordCount} items) PageSize：{PageSize}</span> {List}';`

`51`	`$.CurrentPage = parseInt($.Callback ? $.CurrentPage : $.Separator.urlRequst());`

`52`	`$.CurrentPage = $.CurrentPage \|\| 1;`

`53`	`$.TotalPags = Math.ceil($.RecordCount / $.PageSize);`

`54`	`$.RecordCount = parseInt($.RecordCount);`

55

`56`	`if` `($.TotalPags <= 10 \|\| $.CurrentPage <= 3) {`

`57`	`$.index = 1;`

`58`	`$.endPage = 10 > $.TotalPags ? $.TotalPags : 10;`

59 }

`60`	`else` `{`

`61`	`if` `($.TotalPags - $.CurrentPage <= 7) {`

`62`	`$.index = $.TotalPags - 9;`

`63`	`$.endPage = $.TotalPags;`

`64`	`}` `else` `{`

`65`	`$.index = $.CurrentPage - 2;`

`66`	`$.endPage = $.CurrentPage + 7;`

67 }

68 }

`69`	`var` `s = [];`

`70`	`var` `url = $.Callback ?` `'javascript:{0}('.format($.Callback) :` `'{0}{1}='.format($.Separator.urlParameterClear(), $.Separator);`

`71`	`var` `bracket = $.Callback ?` `')'` `:` `'';`

`72`	`if` `($.CurrentPage > 1) {`

`73`	`s.push('<a href="{0}1{1}{2}" title="{4}"><<</a> <a href="{0}{3}{1}{2}" title="{5}"><</a> '.format(url, $.Callback ? $.Attach :` `'', bracket, $.CurrentPage - 1, en ?` `'first'` `:` `'首页', en ?` `'previous'` `:` `'上一页'));`

74 }

`75`	`for` `(var` `i = $.index; i <= $.endPage; i++) {`

`76`	`s.push($.CurrentPage == i ?` `'<a class="curr">{0}</a> '.format(i) :` `'<a href="{0}{3}{1}{2}" title="{4}">{3}</a> '.format(url, $.Callback ? $.Attach :` `'', bracket, i, en ?` `'page:{0}'.format(i) :` `'第{0}页'.format(i)));`

77 }

`78`	`if` `($.TotalPags > $.CurrentPage) {`

`79`	`s.push('<a href="{0}{3}{1}{2}" title="{5}">></a> <a href="{0}{6}{1}{2}" title="{4}">>></a>'.format(url, $.Callback ? $.Attach :` `'', bracket, $.CurrentPage + 1, en ?` `'end'` `:` `'末页', en ?` `'next'` `:` `'下一页', $.TotalPags));`

80 }

81

`82`	`var` `html = $.Template;`

`83`	`html = html.replace("{RecordCount}", $.RecordCount).replace("{PageSize}", $.PageSize).replace("{PageCount}", $.TotalPags).replace("{CurrentPage}", $.CurrentPage).replace('{List}', s.join(''));`

84

`85`	`var` `o = document.getElementById($.ControlId);`

`86`	`if` `(o) {`

`87`	`o.innerHTML = html;`

88 }

89 }

本段JS支持Javascript涵数回调方式和URL附加参数方式,调用方法如下

1.javascript涵数回调方式

 1     //示例（Javascript 涵数回调方式）-----------------------------
 2      function XO(p, t, c) {
 3         //执行 Ajax 数据调用方法
 4          //并显示返回数据
 5          // p为当前页
 6          //调用分页方法
 7          new Pagination({
 8             RecordCount: 2000,
 9             CurrentPage: p,
10             PageSize: 4,
11             ControlId: "x",
12             Attach: ",2,'中国'",
13             Template: "",
14             Global: "cn",
15             Separator: 'page',
16             Callback: "XO"
17         });
18     }
19     //初使为调用第6页
20     XO(6);