当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > 基于AJAX的分页类实现代码

AJAX技术
自己动手封装的 ajax
Ajax 对象 包含post和get两种异步传输方式
Ajax 超时检查脚本
AJAX 简介及入门实例
ajax 开发守则 10条说明
Ajax 返回字符串的过滤实现代码
Ajax 程序开发中常见问题
AJAX 验证框架13个
ajax 入门基础之 XMLHttpRequest对象总结
基于AJAX的分页类实现代码
如何在Asp.net中使用HtmlArea编辑器
使用 jQuery 简化 Ajax 开发
ASP.NET 与 Ajax 的实现方式
AJAX技术介绍
Ajax程序设计入门
学习Ajax教程,详细了解Get与Post
关于Ajax responseText 的一点阐述
ajax中文乱码解决方法
AJAX中文问题总结
AJAX无刷新更新数据

AJAX技术 中的 基于AJAX的分页类实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-13   浏览: 48 ::
收藏到网摘: n/a

随着AJAX在互联网上的广泛运用,公司也在越来越多的项目里涉及到了AJAX,最近一段时间空闲,于是就用JS写了一个基于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;
}