function XPagination() {
?this.container = null;
?
?this.width = '100%';?
?this.count = 0; // record total count
?this.index = 1; // page index
?this.size = 10; // record count per page
?this.length = 0;// current page record count
?this.onPaginationHandler = null;
?
?this.first = null;
?this.back = null;
?this.next = null;
?this.last = null;
?this.info = null;
?
?this.jump = null;
?this.resize = null;
?this.jumper = null;
?this.resizer = null;
}
XPagination.prototype.init = function(context) {
?this.context = context;
?this.width = (this.context.width) ? this.context.width : '100%';
?this.count = (this.context.count) ? this.context.count : 0;?
?this.index = (this.context.index) ? this.context.index : 1;?
?this.size = (this.context.size) ? this.context.size : 10;
?this.length = (this.context.length) ? this.context.length : 0;?
?this.onPaginationHandler = (this.context.onPaginationHandler) ? this.context.onPaginationHandler : null;
};

XPagination.prototype.create = function(containerName, context) {
?this.container = $(containerName);?
?
?this.init(context);
?
?var s = new Array();
?s[s.length] = '<table style="width:' + this.width + ';" class="x_pagination_bar2" border="0" cellspacing="0" cellpadding="0" align="center"><tr>';
?s[s.length] = '<td width="20" height="20"><input id="first" type="button" class="x_pagination_first" value="" title="first" /></td>';
?s[s.length] = '<td width="20"><input id="back" type="button" class="x_pagination_back" value="" title="back" /></td>';
?s[s.length] = '<td width="20"><input id="next" type="button" class="x_pagination_next" value="" title="next" /></td>';
?s[s.length] = '<td width="20"><input id="last" type="button" class="x_pagination_last" value="" title="last" /></td>';
?s[s.length] = '<td class="x_pagination_font">&nbsp;第<span id="jumper">loading...</span>頁 ';
?
?s[s.length] = '(<span id="resizer">loading...</span>行/頁)';
?
?s[s.length] = '<font id="info">(loading...)</font>';
?s[s.length] = '</td><td>&nbsp;</td></tr></table>';
?
?this.container.innerHTML = s.join('');
?
?this.first = this.container.all('first');
?this.back = this.container.all('back');
?this.next = this.container.all('next');
?this.last = this.container.all('last');
?this.jump = this.container.all('jump');
?this.jumper = this.container.all('jumper');
?this.resizer = this.container.all('resizer');
?this.info = this.container.all('info');
?
?this.set(context);
};

?

XPagination.prototype.set = function(context) {
?var the = this;

?this.width = (context.width) ? context.width : this.width;
?this.count = (undefined != context.count) ? context.count : this.count;??
?this.index = (undefined != context.index) ? context.index : this.index;?
?this.size = (undefined != context.size) ? context.size : this.size;
?this.length = (undefined != context.length) ? context.length : this.length;
?
?this.context.count = this.count;
?
?var pages = 0;
?//alert(this.count);
?if(this.count>0 && this.size!=0) {
??var pages = Math.ceil(this.count / this.size);
?}

?//alert(this.resize.value);
?if(this.count>0) {
??this.info.innerHTML = ' &nbsp; (共<strong>' + this.count + '</strong>行/共<strong>' + pages + '</strong>頁)';
??if(pages>1) {
???var o = new Array();?
???for(var i = 1; i<=pages; i++) {??
????o[o.length] = '\n<option value="' + i + '"' + ((i==this.index) ? ' selected' : '') + '>&nbsp;' + i + '&nbsp;</option>';;
???}
???//alert(o.join(''));
???this.jumper.innerHTML = '&nbsp;<select id="jump" style="font-size:10;" class="x_select" title="jump to">' + o.join('') + '</select>&nbsp;';
??
???this.jump = this.jumper.all('jump');??
??} else {
???this.jumper.innerHTML = '<strong>1</strong>';
??}
?} else {
??this.info.innerHTML = '';
??this.jumper.innerHTML = '<strong>' + this.index + '</strong>';
?}?
?
?
??
?
?//(the.onRowClickHandler || Prototype.emptyFunction)({rowId:tInput.value, checked:tInput.checked});
?if(context.onPaginationHandler) {
??this.onPaginationHandler = context.onPaginationHandler;
?}
?
?
?o = [];
?
?/*
?if(this.size>=this.count) {
??o[o.length] = '<strong>' + this.size + '</strong>';
?} else {
?}*/
??o[o.length] = '<select id="resize" name="resize" style="font-size:10;" class="x_select" >';
??var stepLength = 5;
??var tCount = this.count;
??if(tCount<0) {
???tCount = 101;
??}
??for(var t = 5; t<=50 && t<=(tCount + this.size); t = t + stepLength) {
???o[o.length] = '<option value="' + t + '"' + ((t==this.size)? ' selected': '') + '>' + t + '</option>';???
??}
??o[o.length] = '</select>';
?
?this.resizer.innerHTML = o.join('');
?
?this.resize = this.container.all('resize');
?if(this.resize) {
??this.resize.value = this.size;
?}
?
?if(1 != this.index) {
??this.enable(this.first);
??this.first.onclick = function() {
???(the.onPaginationHandler || Prototype.emptyFunction)({index:1, size:the.size, count:the.count, length:the.length});
??};
?} else {
??this.disable(this.first);???
?}
?
?if(this.index > 1) {
??this.enable(this.back);
??this.back.onclick = function() {
???(the.onPaginationHandler || Prototype.emptyFunction)({index:the.index - 1, size:the.size, count:the.count, length:the.length});
??};
?} else {
??this.disable(this.back);
?}
?
?if((this.index < pages) || (this.count<=0 && this.length==this.size)) {
??this.enable(this.next);
??this.next.onclick = function() {
???(the.onPaginationHandler || Prototype.emptyFunction)({index:the.index + 1, size:the.size, count:the.count, length:the.length});
??};
?} else {
??this.disable(this.next);
?}
?
?if((this.index < pages) || (this.count<=0 && this.length==this.size)) {
??this.enable(this.last);
??this.last.onclick = function() {
???(the.onPaginationHandler || Prototype.emptyFunction)({index:pages, size:the.size, count:the.count, length:the.length});
??};
?} else {
??this.disable(this.last);
?}
?
?if(this.jump) {?
??this.jump.onchange = function() {
???(the.onPaginationHandler || Prototype.emptyFunction)({index:the.jump.selectedIndex + 1, size:the.size, count:the.count, length:the.length});
??};
?}
?
?if(this.resize) {
??this.resize.onchange = function() {
???the.size = the.resize.value;
???(the.onPaginationHandler || Prototype.emptyFunction)({index:1, size:the.size, count:the.count, length:the.length});
??};
?}
};

XPagination.prototype.disable = function(btn) {
?btn.disabled = true;
?btn.className = 'x_pagination_' + btn.id + '_disabled';
};

XPagination.prototype.enable = function(btn) {
?btn.disabled = false;
?btn.className = 'x_pagination_' + btn.id;
};










.x_pagination_bar {
?height:20;
?width:100%;
?border:0px;
?color:#330033;?
?font-size:12px;
?font-family:Verdana, Simsun;
?background-image:url(../image/xpagination/x_paginationbar_bg.gif);
}

.x_pagination_font {
?color:#000000;
?font-size:12px;
?font-family:Verdana, Simsun;
}

.x_pagination_jump {
?height:18px;
?color:#330033;
?font-size:9px;
?border:1px #607BAC solid;
?font-family:Verdana, Simsun;
}

.x_pagination_first??? ?? {background:url(../image/xpagination/x_icon_first.gif????????? ) no-repeat 0 0; }
.x_pagination_back???? ?? {background:url(../image/xpagination/x_icon_back.gif?????????? ) no-repeat 0 0; }
.x_pagination_next???? ?? {background:url(../image/xpagination/x_icon_next.gif????????? ) no-repeat 0 0; }
.x_pagination_last???? ?? {background:url(../image/xpagination/x_icon_last.gif?????????? ) no-repeat 0 0; }
.x_pagination_first_disabled {background:url(../image/xpagination/x_icon_first_disabled.gif ) no-repeat 0 0; }
.x_pagination_back_disabled? {background:url(../image/xpagination/x_icon_back_disabled.gif? ) no-repeat 0 0; }
.x_pagination_next_disabled? {background:url(../image/xpagination/x_icon_next_disabled.gif ) no-repeat 0 0; }
.x_pagination_last_disabled? {background:url(../image/xpagination/x_icon_last_disabled.gif? ) no-repeat 0 0; }

.x_pagination_first????????? ,
.x_pagination_back?????????? ,
.x_pagination_next?????????? ,
.x_pagination_last?????????? ,
.x_pagination_first_disabled ,
.x_pagination_back_disabled? ,
.x_pagination_next_disabled? ,
.x_pagination_last_disabled? {
?cursor:hand;???????????????????????????????????????????
?border:0px;????????????????????????????????????????????
?width:16px;????????????????????????????????????????????
?height:16px;??????????????????????????????????????????? ?
}









<html>
<head>
<title>XPagination</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

<link href="resource.prototype.css" rel="stylesheet" type="text/css"></link>
<link href="../theme/default/style/index.css" rel="stylesheet" type="text/css"></link>
<script language="JavaScript" type="text/JavaScript" src="../../common/script/prototype.js"></script>
<script language="JavaScript" type="text/JavaScript" src="../script/xpagination.js"></script>

</head>

<body style="margin:0;overflow-x:hidden;" scroll="no">
?
?
?
?
?
?
?
<script language="JavaScript" type="text/JavaScript">
function viewHtml(){
?$("result").innerHTML = '<xmp>' + $('container').outerHTML + '</xmp>';
}
function setPagination() {
?var p = {};
?if(''!=$F('count')) {
??p['count'] = $F('count');
?}
?if(''!=$F('index')) {
??p['index'] = $F('index');
?}
?if(''!=$F('length')) {
??p['length'] = $F('length');
?}
?if(''!=$F('size')) {
??p['size'] = $F('size');
?}
?xpagination.set(p);
}
</script>
?
?
?
?

<table style="width:100%;height:100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="height:30;border-bottom:1 solid #CCCCCC;" colspan="2">
?<strong>XPagination</strong>
</td>
</tr>
<tr>
<td style="border-right:1 solid #CCCCCC;padding:2;" align="center">

?
??
?
?<div id="container" style="height:22;width:100%;border:1px solid #0000FF;"></div>

??
?
?

?
?
?<script language="JavaScript" type="text/JavaScript">
?<!--
?function onPagination(p) {
??$('result').innerHTML = $H(p).toQueryString();
?}
?var context = {
??count: 101,
??index: 2,
??size: 10,
??length: 10,
??onPaginationHandler: onPagination
?};
?var xpagination = new XPagination();
?xpagination.create('container', context);
?//-->?
?</script>

</td>
<td width="200" style="width:200;" align="center" valign="top">
?<div class="box" style="padding:2;">??
??
??<input type="button" class="bn" value="viewHtml" onclick="viewHtml();" />
??
??<table style="width:100%;" cellpadding="0" cellspacing="0" border="0">
??<form id="fom" name="fom" onsubmit="return false;">
??<tr>
??<td class="f">count</td>
??<td><input id="count" name="count" value="101" /></td>
??</tr>
??<tr>
??<td class="f">index</td>
??<td><input id="index" name="index" value="2" /></td>
??</tr>
??<tr>
??<td class="f">length</td>
??<td><input id="length" name="length" value="10" /></td>
??</tr>
??<tr>
??<td class="f">size</td>
??<td><input id="size" name="size" value="10" /></td>
??</tr>
??<tr>
??<td colspan="2"><input type="button" class="bn" value="xpagination.set" onclick="setPagination();" /></td>
??</tr>
??</form>
??</table>
??
??
?</div>
</td>
</tr>
<tr>
<td style="width:100%;height:30;border-top:1 solid #CCCCCC;" colspan="2">
?
?<input type="button" class="bn" value="xpagination.set({count:0, index:1, length:0, size:10});" onclick="eval(this.value);" />
?<input type="button" class="bn" value="xpagination.set({count:-1, index:2, length:10, size:10});" onclick="eval(this.value);" />
?<input type="button" class="bn" value="xpagination.set({count:-1, index:1, length:10, size:10});" onclick="eval(this.value);" />
?
</td>
</tr>
<tr>
<td style="width:100%;height:100;border-top:1 solid #CCCCCC;" colspan="2">

?<table style="width:100%;height:100%;table-layout:fixed;" cellpadding="0" cellspacing="0" border="0">
?<tr>
?<td>
??<div id="result" style="width:100%;height:100%;overflow:auto;padding:2;table-layout:fixed;">result</div>
?</td>
?</tr>
?</table>
?
</td>
</tr>
</table>

?
?
</body>
</html>

?

?