技术文档
编程杂记
友情链接
技术文档 >AJAX技术 >
基于Ajaxpro.net的客户端数据分页控件--PageList
前面写了一个简单的基于AjaxPro.net的客户端数据绑定控件,今天花了点时间,写了一个基于AjaxPro.net的客户端分页控件,可根据需求修改成通用客户端数据分页控件.
CS代码.注册Ajaxpro.net控件,这里省略.
页码代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.table{background:#000;border:0;}
.table td{background:#fff;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="ShowData">
</div>
<div id="showpage">
</div>
<script language="javascript" type="text/javascript">
//记录页码变化
var expectedHash = "";
function makeHistory(newHash)
{
window.location.hash = newHash;
expectedHash = window.location.hash;
}
/*------------------------------------
*类:PageList 用于数据分页
*参数:func callback函数--用于数据绑定.
* pagesize 分页大小
* pagecount 总页码
* recordcount 总记录数
* container 控件容器
* width 控件宽度,简单实现样式控制,复杂的样式控制,可以根据需求自行添加
* 作者: shenjk
* 日期: 2007-6-29
* http://www.shenjk.com
*-------------------------------------*/
var PageList=function(func,pagesize,pagecount,recordcount,container,width){
this.func=func;
this.pagesize=pagesize;
this.pagecount=pagecount;
this.recordcount=recordcount;
this.container=container;
this.width=width!=null?((width.indexOf('px')>0)?width:width+'px'):this.container.offsetWidth+'px';
};
PageList.prototype={
Page:function(){
var func=this.func;
var previous=this.previous;
var next=this.next;
var pagesize=this.pagesize;
var pagecount=this.pagecount;
var recordcount=this.recordcount;
var container=this.container;
var width=this.width;
var _id=this.container.id+"_PAGELIST";
if(document.getElementById(_id)!=null){
this.container.removeChild(document.getElementById(_id));
}
var div=document.createElement("div");
div.id=_id;
div['style']['width']=width;
div.innerHTML='共'+this.recordcount+'条记录,'+this.pagecount+'页 ';
var i_start=this.ipageindex-4<1?1:this.ipageindex-4;
var i_end=i_start+4>this.pagecount?this.pagecount:i_start+4;
var pre=document.createElement("a");
pre.innerHTML='上一页';
pre.href="javascript:void(0)";
div.appendChild(pre);
if(previous>=1){
addEvent(pre,'click',this.PageFormat.bind(this,previous));
}
for(var i=i_start;i<=i_end;i++){
var cur=document.createElement("a");
cur.innerHTML=i;
cur.href="javascript:void(0)";
cur['style']['margin']='0 2px 0 2px';
if(this.ipageindex==i)cur.style.color='red';
div.appendChild(cur);
addEvent(cur,'click',this.PageFormat.bind(this,i));
cur=null;
}
var nx=document.createElement('a');
nx.innerHTML='下一页';
nx.href='javascript:void(0)';
div.appendChild(nx);
if(next<=this.pagecount){
addEvent(nx,'click',this.PageFormat.bind(this,next));
}
var span=document.createElement('span');
span.innerHTML=" 转到第";
div.appendChild(span);
var intext=document.createElement('input');
intext.type='text';
intext.style.width='20px';
intext.style.border='1px solid #999';
intext.style.padding='0';
intext.style.margin='0';
intext.value=this.ipageindex;
intext.onkeypress=function(event){
evt = event || window.event;
var k = evt.keyCode | evt.which;
if (k < 48 || k > 57){
alert("你输入的不是数字！");
if(document.all!=null){evt.keyCode = 0 ;}
}
}
div.appendChild(intext);
var span1=document.createElement('span');
span1.innerHTML="页 ";
div.appendChild(span1);
var go=document.createElement("input");
go.type="button";
go.style.padding='0';
go.style.margin='0';
go.value='GO';
go.onclick=function(){
new PageList(func,pagesize,pagecount,recordcount,container,width).PageFormat(intext.value);
}
div.appendChild(go);
this.container.appendChild(div);
},
PageFormat:function(index){
makeHistory(index);
this.ipageindex=index;
this.ipageindex=parseInt(((this.ipageindex>0?this.ipageindex:1)<this.pagecount)?(this.ipageindex>0?this.ipageindex:1):this.pagecount);
this.previous=parseInt(this.ipageindex>1?this.ipageindex-1:this.ipageindex);
this.next=parseInt(this.ipageindex<this.pagecount?this.ipageindex+1:this.ipageindex);
this.func(this.ipageindex);
this.Page(this.container,this.width);
}
};
//测试例子
function $(sid){return document.getElementById(sid);}
function pageds(index){
var ds= new Ajax.Web.DataSet();
var dt = new Ajax.Web.DataTable();
dt.addColumn("FirstName", "System.String");
dt.addColumn("Age", "System.Int32");
if(index<1)index=1;
for(var i=(index-1)*10;i<index*10;i++){
dt.addRow({"FirstName":"Michael_"+i,"Age":i});
}
ds.addTable(dt);
return ds;
}
function Test(){
var ipageindex=(window.location.hash).substr(1);;
if(ipageindex==null && typeof(ipageindex)!='number')ipageindex=1;
var P= new PageList(function(res){
var t=new DataList(document.getElementById('ShowData'),pageds(res));
t.CreateTable('shenjk',200,0,'table',1,1);
t.HeaderTemplate(new Array('姓名','年龄'));
t.DataBind()
},10,10,100,$('showpage'));
P.PageFormat(ipageindex);
}
addEvent(window,'load',this.Test.bind(this));
/*------------------------------------
*类:DataList 用于绑定ds
*参数:container 控件容器.
* ds 数据源
*-------------------------------------*/
var DataList=function(container,ds){
this.container=(typeof container=='undefined' || typeof container!='object')?document.body:container;
this.dt=ds.Tables[0];
this.rowsCount=ds.Tables[0].Rows.length;
this.columnsCount=ds.Tables[0].Columns.length;
};
DataList.prototype={
//创建数据表格
CreateTable:function(_Id,width,height,cssName,cellPadding,cellSpacing){
var Id='_UNDEDINEDID';
if(_Id!=null && _Id!='')Id=_Id;
if($(Id)==null){
var table=document.createElement('table');
table.id=Id;
this.container.appendChild(table);
this.table=table;
}else{
this.table=$(Id);
this.table.removeChild(this.table.getElementsByTagName('tbody')[0]);//清除现有数据,处理方法有待改进
}
if(width!=null && width!='' && parseInt(width)!=0)this.table['style']['width']=width+'px';
if(height!=null && height!='' && parseInt(height)!=0)this.table['style']['height']=height+'px';
if(cssName!=null && typeof(cssName=='string') && cssName!='')this.table.className=cssName;
if(cellPadding!=null && typeof(cellPadding)=='number')this.table.cellPadding=cellPadding;
if(cellSpacing!=null && typeof(cellSpacing)=='number')this.table.cellSpacing=cellSpacing;
},
//自定义表格头部内容
HeaderTemplate:function(header){
if(header.length!=this.columnsCount){
throw('HeaderTemplate length is not matched.');
}else{
var r_head=this.table.insertRow(0);
for(var i=0;i<this.columnsCount;i++){
var cell=r_head.insertCell(i);
cell.innerHTML=header[i];
}
}
},
//数据绑定
DataBind:function(){
//绑定头部
if(this.table.rows.length==0){ //如果没有自定头部,则采用数据字段作为头部.
var r_head=this.table.insertRow(0);
for(var i=0;i<this.columnsCount;i++){
var cell=r_head.insertCell(i);
cell.innerHTML=this.dt.Columns[i].Name;
}
}
//绑定数据
for(var i=0;i<this.rowsCount;i++){
var r=this.table.insertRow(i+1);
for(var j=0;j<this.columnsCount;j++){
var cell=r.insertCell(j);
cell.innerHTML=this.dt.Rows[i][this.dt.Columns[j].Name];
}
}
}
};
</script>
</form>
</body>
</html>
网友评论
学习一下..我对javascript也很感兴奋..
我来说几句:
玉米烙 www.shenjk.com CopyRight ©2005-2009 浙ICP备05074954号
mailto:shjk813@126.com
