javascript 分页

核心提示：01/* 02分页控件（DEVIN 2011年02月16日） 03 04模版说明： 05标准中文：<span>共：{RecordCount}条 {PageSize}条/页 {CurrentPage}页/{PageCount}页</span> {List} 06标准英文：<span>

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" 这个参数.