第一次整的ajax分页

列可进行配置和自定义渲染方法.
需要prototype.js和一个HashMap的js实现,在JSP中用
//分页的公有方法
function render(parmetersName,tableName,url)
{
var parmeters = "name="+$(parmetersName).value;
var grid = new Grid(tableName,url,parmeters);
grid.render();}


//存放页面grid的HashMap
var gridmap = new HashMap();
//页面表格类
var Grid = Class.create();
Grid.prototype = {initialize:function(tableName,url,parmeter)
{
//表格的ID
this.tableName = tableName;
//获取数据的URL
this.url = url;
//查询参数
this.parmeter = parmeter;
//记录分页的信息
this.page = new PageEntity();
gridmap.put(this.tableName,this);
},
getData:function()
{
var tempParmeter = this.parmeter + "&currentPage=" + this.page.getCurrentPage()+"&pageSize="+this.page.getPageSize();
var myAjax = new Ajax.Request(this.url,{method: 'post', parameters: tempParmeter, onSuccess:function(originalRequest){
var data = new Data(eval(originalRequest.responseText),myAjax.tableName,myAjax.pageEntity);
data.render();
},
onFailure:function(originalRequest){alert("获取数据出错！请重试！");}});
myAjax.tableName = this.tableName;
myAjax.pageEntity = this.page;
},
render:function()
{
//先得到数据，后清除表格．在响应快的情况下．可以导致数据错误．因为表格还未清除完，而数据开始render.
//本机测试．没有出现异常
this.getData();
this.clear();
},
//清除表格内容
clear:function()
{
var oTable = $(this.tableName);
var oRows = oTable.rows;
for(var i=oRows.length-1;i>0;i--)
{
oTable.deleteRow(i);
}
}
};
//解析返回的数据，生成表格
function Data(data,tableName,page)
{
this.tableName = tableName;
//TD映射字符串数组
this.mapping = new Array();
//存放解析返回的数据与映射,生成的表格数据
this.dataArray = new Array();
//服务器返回的数据
this.data = data;
//TD的自定义render
this.renderFu = new HashMap();
this.page = page;
this.render = function()
{
var tb = $(this.tableName);
var childRows = tb.rows;
var childCells = childRows[0].cells;
for(var i=0; i<childCells.length; i++) {
this.mapping.push(childCells[i].mapping);
if(childCells[i].render)
{
this.renderFu.put(childCells[i].mapping,childCells[i].render);
}
}
this.parseData();
this.addData();
this.addPage();
};
this.parseData=function()
{
var count = this.data[0];
this.page.init(count.totalCount,this.page.pageSize);
var dataList = count.List;
for(var i=0;i<dataList.length;i++)
{
var temp = dataList[i];
var hash=new HashMap();
for(var j=0;j<this.mapping.length;j++)
{
var virable = this.mapping[j];
hash.put(virable,eval("temp."+virable));
}
this.dataArray.push(hash);
}
};
this.addData=function()
{
var oTable = $(this.tableName);
for(var i=0;i<this.dataArray.length;i++)
{
var hashData = this.dataArray[i];
var oRow=oTable.insertRow(oTable.rows.length);
oRow.onmouseover =function(){
this.bgColor='#e5edf7';
};
oRow.onmouseout=function(){
this.bgColor='#FFFFFF';
};
for(var j=0;j<this.mapping.length;j++)
{
var oCell=oRow.insertCell();
if(this.renderFu.get(this.mapping[j]))
{
var fu = this.renderFu.get(this.mapping[j])+"('"+hashData.get(this.mapping[j])+"')";
oCell.innerHTML=eval(fu);
}
else
{
oCell.innerText=hashData.get(this.mapping[j]);
}
oCell.className="table_table";
}
}
};
this.addPage = function()
{
var oTable = $(this.tableName);
var oRow = oTable.insertRow(oTable.rows.length);
var oCell = oRow.insertCell();
oCell.colSpan = this.mapping.length;
oCell.className = "table_page";
oCell.innerHTML = this.page.buildHTML(this.tableName);
};
}


//分页信息类
function PageEntity()
{
this.totalRows = 0; // 记录总数
this.totalPages = 0; // 总页数
this.pageSize = 20; // 每页显示数据条数，默认为10条记录
this.currentPage = 1; // 当前页数
this.endPage = 1; // 结束页数
this.hasPrevious = false; // 是否有上一页
this.hasNext = false; // 是否有下一页
this.buildHTML = function(tableName)
{
var html = "";
html += "每页显示"+this.pageSize+"条&nbsp;共"+this.totalRows+"条/共"+this.totalPages+"页&nbsp;&nbsp;&nbsp;&nbsp;";
if(this.currentPage!=1)
{
html += "&nbsp;<a href='#' onclick=\"return submitPageQuery(1,'"+tableName+"')\">首页</a>";
}
if(this.currentPage!=1&&this.hasPrevious)
{
html += "&nbsp;<a href='#' onclick=\"return submitPageQuery("+(parseInt(this.currentPage)-1)+",'"+tableName+"')\">上一页</a>";
}
if(this.currentPage!=this.totalPages&&this.hasNext)
{
html += "&nbsp;<a href='#' onclick=\"return submitPageQuery("+(parseInt(this.currentPage)+1)+",'"+tableName+"')\">下一页</a>";
}
if(this.currentPage!=this.totalPages&&this.totalPages!=0)
{
html += "&nbsp;<a href='#' onclick=\"return submitPageQuery("+this.endPage+",'"+tableName+"')\">尾页</a>";
}
if(this.totalPages!=0)
{
html += "&nbsp;跳转到<select name='select' class='input' id='select' onchange=\"return submitPageQuery(this.value,'"+tableName+"')\">";
for(var i=1;i<=this.totalPages;i++)
{
if(this.currentPage==i)
{
html += "<option value='"+i+"' selected>"+i+"</option>";
}
else
{
html += "<option value='"+i+"'>"+i+"</option>";
}
}
}
return html;
};
this.init = function(totalRows,pageSize)
{
this.totalRows = totalRows;
this.pageSize = pageSize;
this.totalPages = ((parseInt(this.totalRows) + parseInt(this.pageSize)) - 1) / parseInt(this.pageSize);
this.totalPages = parseInt(this.totalPages);
this.setEndPage(totalRows, pageSize);
this.refresh(); // 刷新当前页面信息
};
    this.setEndPage = function(totalRows,pageSize) {
var pageNumber = totalRows / pageSize;
pageNumber = parseInt(pageNumber);
var pageRemainder = totalRows % pageSize;
if (pageRemainder > 0) {
this.endPage = pageNumber + 1;
} else {
this.endPage = pageNumber;
}
};
this.getCurrentPage = function()
{
return this.currentPage;
};
this.setCurrentPage = function(currentPage)
{
this.currentPage = currentPage;
this.refresh();
};
this.getPageSize = function()
{
return this.pageSize;
};
this.setPageSize = function(pageSize) {
this.pageSize = pageSize;
this.refresh();
};
this.getTotalPages = function()
{
return this.totalPages;
};
this.setTotalPages = function(totalPages) {
this.totalPages = totalPages;
this.refresh();
};
this.getTotalRows = function()
{
return this.totalRows;
};
this.setTotalRows = function(totalRows) {
this.totalRows = totalRows;
this.refresh();
};
this.first = function()
{
this.currentPage = 1;
this.setHasPrevious(false);
this.refresh();
};
this.previous = function()
{
this.currentPage--;
this.refresh();
};
this.next = function()
{
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
this.refresh();
};
this.last = function()
{
this.currentPage = this.totalPages;
this.setHasNext(false);
this.refresh();
};
this.isHasNext = function()
{
return this.hasNext;
};
this.setHasNext = function(hasNext) {
this.hasNext = hasNext;
};
this.isHasPrevious = function()
{
return this.hasPrevious;
};
this.setHasPrevious  =function(hasPrevious)
{
this.hasPrevious = hasPrevious;
};
this.refresh = function()
{
if (this.totalPages <= 1) {
this.hasPrevious = false;
this.hasNext = false;
} else if (this.currentPage == 1) {
this.hasPrevious = false;
this.hasNext = true;
} else if (this.currentPage == this.totalPages) {
this.hasPrevious = true;
this.hasNext = false;
} else {
this.hasPrevious = true;
this.hasNext = true;
}
};
this.getEndPage = function()
{
return this.endPage;
}
}

评论

5 楼 freemailfjgh 2008-05-15  

use T-SQL procedure

4 楼 lsk 2008-04-17  

我们这的分页比较爽.
从页面上传一个 javascript 的function 名称到java类中. 返回一个List, 既为结果. list的最后一个对象是个String类型的.
就是分页的工具栏.在页面上直接innerHTML搞定!

3 楼 hxdream 2008-04-15  

代码太多了吧,维护起来好像比较困难

2 楼 379548695 2008-04-15  

哎呀。有点麻烦好像！

1 楼 xo_tobacoo 2008-04-15  

不错，学习了！




但是我看到一堆js就头大！