基于AJAX的分页类实现代码

复制代码 代码如下:

  /**

  * <p>pagination.js

  * <p>通用的基于AJAX的分页类

  * @author jeanwendy

  * @version 1.0

  */

  var paginationIndex = 0;

  var pagination = function(trTemplatId) {

  $().ajaxStart(function() {

  $.blockUI({

  message : '<table><tr><td style="vertical-align :bottom"><font size=2pt> 加载数据,请稍后...</font></td></tr></table>'

  });

  }).ajaxStop($.unblockUI);

  paginationIndex = paginationIndex + 1;

  this.id = paginationIndex;

  this.trTemplatId = trTemplatId;

  this.pageNo = 1;

  this.pageSize = 10;

  this.beforeQuery = null;

  this.afterQuery = null;

  this.url = null;

  this.params = null;

  this.templat = null;

  this.childrenCount = null;

  this.setPageNo = function(pageNo) {

  if (pageNo != null)

  this.pageNo = pageNo;

  }

  this.setPageSize = function(pageSize) {

  if (pageSize != null)

  this.pageSize = pageSize;

  }

  this.setBeforeQuery = function(fn){

  this.beforeQuery = fn;

  }

  this.setAfterQuery = function(fn){

  this.afterQuery = fn;

  }

  this.load = function(url, params) {

  //初始化(只在第一次查询时执行)

  if(this.templat == null && this.childrenCount == null){

  var templatObj = $('#'+this.trTemplatId);

  templatObj.parent().attr('id','tbody_id'+this.id);

  templatObj.removeAttr('id');

  templatObj.wrap("<div id='divTemplat'></div>");

  this.templat = $('#divTemplat').html();

  $('#divTemplat').remove();

  this.childrenCount = $('#tbody_id'+this.id).children().size();

  }

  //开始查询

  this.url = url;

  if(params == null) params = {};

  $.extend(params,{pageNo:this.pageNo,pageSize:this.pageSize});

  this.params = params;

  var thisObj = this;

  var options = {

  url : url,

  data : params,

  async : false, //采用同步方式请求

  type : 'POST',

  dataType : 'json',

  error : function(xmlhttp, errInfo, e) { //请求出错处理:如:404等

  if (xmlhttp.status == 200) alert('您已经很长时间没有访问网站,请退出后重新登陆!');

  else alert('请求后台服务时发生错误:' + xmlhttp.status);

  },

  success : function(data){

  //删除上一次的数据

  $('#tbody_id'+thisObj.id).children().filter(':gt('+(thisObj.childrenCount-1)+')').remove();

  thisObj.pageList(data.data);

  thisObj.pageBar(data.total);

  if($.isFunction(thisObj.afterQuery)) thisObj.afterQuery();

  }

  };

  if($.isFunction(this.beforeQuery)) this.beforeQuery();

  $.ajax(options); //发送请求

  }

  this.pageList = function(data){

  var filedArr = this.templat.match(/\{[A-Za-z0-9_]+\}/ig);

  for(var i = 0;i < data.length;i++){

  var thisTemplat = this.templat;

  for(var j = 0;j < filedArr.length;j++){

  var key = filedArr[j].substring(1,filedArr[j].length-1);

  if(key == 'NO_'){ //序号标识

  var value = (this.pageNo-1)*this.pageSize + i + 1;

  thisTemplat = thisTemplat.replace(new RegExp('\{'+key+'\}','gm'),value);

  }else{

  var value = data[i][key];

  if(typeof(value) != "undefined" && value == null) value = '';

  thisTemplat = thisTemplat.replace(new RegExp('\{'+key+'\}','gm'),value);

  }

  }

  $(thisTemplat).appendTo($('#tbody_id'+this.id));

  }

  }

  this.pageBar = function(total){

  var templatObj = $(this.templat);

  var delChildren = templatObj.children(':gt(0)');

  delChildren.remove();

  templatObj.children().attr('colspan',$(this.templat).children().size());

  templatObj.children().attr('align','right');

  var pageCount;

  if(total % this.pageSize == 0) pageCount = total/this.pageSize;

  else pageCount = parseInt(total/this.pageSize) + 1;

  if(pageCount == 0) pageCount = 1;

  var toolbar = "第"+this.pageNo+"/"+pageCount+"页("+total+"条记录)";

  if(this.pageNo == 1) toolbar = toolbar + " 首页 上页";

  else toolbar = toolbar + " <a href='' id='firstPage"+this.id+"'>首页</a> <a href='' id='prePage"+this.id+"'>上页</a>";

  if(this.pageNo == pageCount) toolbar = toolbar + " 下页 末页";

  else toolbar = toolbar + " <a href='' id='nextPage"+this.id+"'>下页</a> <a href='' id='lastPage"+this.id+"'>末页</a>";

  toolbar = toolbar + " 每页<input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pageSize"+this.id+"' value="+this.pageSize+" />条";

  toolbar = toolbar + " <input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pageNo"+this.id+"' value="+this.pageNo+" />";

  toolbar = toolbar + " <input style='height:20px;border:1 solid black' id='goPage"+this.id+"' type='button' value='GO'>";

  templatObj.children().html(toolbar);

  $(templatObj.wrap("<div></div>").parent().html()).appendTo($('#tbody_id'+this.id));

  var thisObj = this;

  $('#firstPage'+thisObj.id).click(function(){

  thisObj.pageNo = 1;

  thisObj.load(thisObj.url,thisObj.params);

  return false;

  });

  $('#prePage'+thisObj.id).click(function(){

  thisObj.pageNo = parseInt(thisObj.pageNo) - 1;

  thisObj.load(thisObj.url,thisObj.params);

  return false;

  });

  $('#nextPage'+thisObj.id).click(function(){

  thisObj.pageNo = parseInt(thisObj.pageNo) + 1;

  thisObj.load(thisObj.url,thisObj.params);

  return false;

  });

  $('#lastPage'+thisObj.id).click(function(){

  thisObj.pageNo = pageCount;

  thisObj.load(thisObj.url,thisObj.params);

  return false;

  });

  $('#pageSize'+thisObj.id).keydown(function(e){

  if(e.keyCode==13) {

  var v = $('#pageSize'+thisObj.id).val();

  if(!isIntGreatZero(v) || v == '0'){

  alert('您输入显示条数不合法,请重新输入!');

  $("#pageSize"+thisObj.id).focus();

  return;

  }

  if(v > 200){

  alert('您输入显示条数过大了,请重新输入!');

  $("#pageSize"+thisObj.id).focus();

  return;

  }

  thisObj.pageNo = 1;

  thisObj.pageSize = v;

  thisObj.load(thisObj.url,thisObj.params);

  }

  });

  $('#pageNo'+thisObj.id).keydown(function(e){

  if(e.keyCode==13) {

  $('#goPage'+thisObj.id).triggerHandler('click');

  }

  });

  $('#goPage'+thisObj.id).click(function(){

  var v = $('#pageNo'+thisObj.id).val();

  if(!isIntGreatZero(v) || v == '0'){

  alert('您输入页数不合法,请重新输入!');

  $("#pageNo"+thisObj.id).focus();

  return;

  }

  if(v > pageCount){

  alert('您输入页数大于总页数,请重新输入!');

  $("#pageNo"+thisObj.id).focus();

  return;

  }

  thisObj.pageNo = v;

  thisObj.load(thisObj.url,thisObj.params);

  });

  }

  }

  //true if the string is empty

  var isEmpty = function(text) {

  var isEmpty = true;

  for (var i = 0; i < text.length; i++) {

  if (text.charAt(i) != ' ') {

  isEmpty = false;

  break;

  }

  }

  return isEmpty;

  }

  //true if the string is int and great than zero or equals zero

  var isIntGreatZero = function(str) {

  if (isEmpty(str))

  return false;

  var temp1 = true;

  var temp2 = '0123456789';

  for (var i = 0; i < str.length; i++) {

  var c = str.charAt(i);

  if (temp2.indexOf(c) == -1) {

  temp1 = false;

  break;

  } else {

  if (c == '0' && i == 0 && str.length > 1) {

  temp1 = false;

  break;

  }

  }

  }

  return temp1;

  }