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);
2.URL附加参数方式
1 //示例（URL 附加参数方式）-----------------------------
2 new Pagination({
3 RecordCount: 2000,
4 PageSize: 4,
5 ControlId: "o",
6 Template: "",
7 Global: "en",
8 Separator: 'page'
9 });
两者调用的区别在于有无"Callback" 这个参数.