实现Ajax翻页效果

实现Ajax翻页效果:

list.aspx

<%@ Page CodeBehind="list.aspx.cs" Language="c#" Inherits="book.pager.list" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>分页效果示例</title>
<style type="text/css">

</style>
</head>
<body MS_POSITIONING="GridLayout">
<form name="form1">
<label for="title">标题关键字：</label><input type="text" id="title" name="title"/>
<input type="button" value="查询" onclick="getPage(1)"/>
<span id="tip">正在加载……</span>
</form>
<div id="content">
</div>
</body>
</html>
<script type="text/javascript">
<!--
//得到内容容器和提示框节点
var content=document.getElementByIdx("content");
var tip=document.getElementByIdx("tip");
function getPage(page){
tip.style.display="inline";
var key=document.forms.form1.title.value;
//创建浏览器兼容的XMLHttpRequest对象
var xmlhttp;
try{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp= new XMLHttpRequest();
}catch(e){}
}
}
//定义XMLHttpRequest对象的事件处理程序
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
//关闭显示条
tip.style.display="none";
if(xmlhttp.status==200){
//当加载成功时将内容显示于页面
content.innerHTML=xmlhttp.responseText;
}else{
//否则弹出错误信息
alert(xmlhttp.status);
}
}
}
//创建一个连接
xmlhttp.open("get","show.aspx?page="+page+"&key="+key);
//发送请求
xmlhttp.send(null);

}
-->
</script>

list.aspx.cs

public class list : System.Web.UI.Page
{
private void Page_Load(object sender,System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
}

#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}

show.aspx

using System;
using System.Data;
using System.Web.UI.WebControls;
using System.Text;

namespace book.pager
{
/// <summary>
/// show 的摘要说明。
/// </summary>
public class show : System.Web.UI.Page
{
protected int pageSize=5;//定义每页需要显示的记录数
private void Page_Load(object sender,System.EventArgs e)
{
//获取查询字符串表示的页数，默认为1
int page=1;
//利用异常机制确保转换string到int类型不会出错
try
{
page=Convert.ToInt32(Request.QueryString["page"]);
}
catch(Exception e1){}

//获得查询条件
string key=Request.QueryString["key"];
if(key==null)key=string.Empty;
//过滤特殊符号，避免sql注入
key=key.Replace("'","").Replace(""","");

//连接数据库并获得数据源
System.Data.OleDb.OleDbConnection conn=new System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source="+Server.MapPath("data.mdb"));
conn.Open();
System.Data.OleDb.OleDbCommand cmd=new System.Data.OleDb.OleDbCommand();
cmd.Connection=conn;
cmd.CommandText="select count(*) from info where title like '%"+key+"%'";
int count=Convert.ToInt32(cmd.ExecuteScalar());

//实现自定义的分页逻辑
StringBuilder sb=new StringBuilder("select top "+pageSize.ToString()+" * from info where title like '%"+key+"%'");
//如果不是第一页
if(page>1)
{
sb.Append(" and id not in(select top "+(pageSize*(page-1)).ToString()+" id from info where title like '%"+key+"%' order by [date],id desc)");
}
sb.Append(" order by [date],id desc");

//得到数据并填充到DataTable中
DataTable dt=new DataTable();
System.Data.OleDb.OleDbDataAdapter da=new System.Data.OleDb.OleDbDataAdapter(sb.ToString(),conn);
da.Fill(dt);

//创建DataGrid对象
DataGrid dg=new DataGrid();
dg.AllowPaging=false;
dg.ShowFooter=false;
dg.AutoGenerateColumns=false;
BoundColumn bc;
HyperLinkColumn hlc;

//给DataGrid添加标题列
hlc=new HyperLinkColumn();
hlc.HeaderText="标题";
hlc.DataTextField="title";
hlc.DatanavigateUrlField="id";
hlc.DatanavigateUrlFormatString="showInfo.aspx?id={0}";
hlc.ItemStyle.Width=Unit.Pixel(400); //设定标题列的宽度
hlc.Target="_blank";
dg.Columns.Add(hlc);

//给DataGrid添加时间列
bc=new BoundColumn();
bc.HeaderText="发表时间";
bc.ItemStyle.Width=Unit.Pixel(140);
bc.DataField="date";
dg.Columns.Add(bc);

//将数据源绑定到DataGrid对象
dg.DataSource=dt;
dg.DataBind();

//将数据提交到页面
Response.Write(this.GetStringByControl(dg)+"<div id='pager'>"+this.GenPager(page,pageSize,count)+"</div>");

//关闭数据库连接
conn.Close();

}

//通过Asp.net控件获得其相应的HTML字符串表示
public string GetStringByControl(System.Web.UI.Control c)
{
System.Text.StringBuilder sb=new System.Text.StringBuilder();
System.IO.StringWriter writer=new System.IO.StringWriter(sb);
System.Web.UI.HtmlTextWriter htw=new System.Web.UI.HtmlTextWriter(writer);
c.RenderControl(htw);
return sb.ToString();
}

//获得分页代码
public string GenPager(int page,int pageSize,int count)
{
StringBuilder sb=new StringBuilder();
int pageCount=(int)Math.Ceiling((double)count/pageSize);
int start=((page-1)/10)*10+1;

for(int i=start;i<=pageCount && i<start+10;i++)
{
if(i==page)sb.Append("<span title='当前页'>["+i.ToString()+"]</span>");
else sb.Append("<a href='javascript:getPage("+i+")' title='第"+i.ToString()+"页'>["+i.ToString()+"]</a>");
}

if(start>1)
{
sb.Insert(0,"<a href='javascript:getPage("+(start-1).ToString()+")' title='第"+(start-1).ToString()+"页'><<</a>");
sb.Insert(0,"<a href='javascript:getPage("+(1).ToString()+")' title='首页'>|<<</a>");
}

if(start+10<pageCount)
{
sb.Append("<a href='javascript:getPage("+(start+10).ToString()+")' title='第"+(start+10).ToString()+"页'>>></a>");
sb.Append("<a href='javascript:getPage("+pageCount.ToString()+")' title='第"+pageCount.ToString()+"页（末页）'>>>|</a>");
}

return sb.ToString();
}

#region Web 窗体设计器生成的代码 override protected void OnInit(EventArgs e) { // // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。 // InitializeComponent(); base.OnInit(e); } /// <summary> /// 设计器支持所需的方法 - 不要使用代码编辑器修改 /// 此方法的内容。 /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion } }

原文链接：https://www.f2er.com/ajax/166667.html

猜你在找的Ajax相关文章