基于AJAX的分页类实现代码
基于AJAX的分页类实现代码
发布时间:2016-12-29 来源:查字典编辑
摘要:复制代码代码如下:/***pagination.js*通用的基于AJAX的分页类*@authorjeanwendy*@version1.0*...

复制代码 代码如下:

/**

* <p>pagination.js

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

* @author jeanwendy

* @version 1.0

*/

var paginationIndex = 0;

var pagination = function(trTemplatId) {

$().ajaxStart(function() {

$.blockUI({

message : '<table><tr><td><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 type='text' id='pageSize"+this.id+"' value="+this.pageSize+" />条";

toolbar = toolbar + "<input type='text' id='pageNo"+this.id+"' value="+this.pageNo+" />";

toolbar = toolbar + "<input 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;

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新AJAX相关学习
热门AJAX相关学习
编程开发子分类