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>