基于AJAX的分页类实现代码
程序员文章站
2022-06-24 16:17:57
复制代码 代码如下:/** *
pagination.js *
通用的基于ajax的分页类 * @author jeanwendy *...
复制代码 代码如下:
/**
* <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;
}
上一篇: AJAX 进度条实现代码