AJAX实现分页无刷新
搜索页:
<%
@ Page language
=
"
c#
"
Codebehind
=
"
WebForm1.aspx.cs
"
AutoEventWireup
=
"
false
"
Inherits
=
"
AJAX现实分页无刷新.WebForm1
"
%>
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.0 Transitional//EN " >
< HTML >
< HEAD >
< title > WebForm1 </ title >
< meta name = " GENERATOR " Content = " Microsoft Visual Studio .NET 7.1 " >
< meta name = " CODE_LANGUAGE " Content = " C# " >
< meta name = " vs_defaultClientScript " content = " JavaScript " >
< meta name = " vs_targetSchema " content = " http://schemas.microsoft.com/intellisense/ie5 " >
< style type = " text/css " > table {font-size=15px;}
span#tip {background-color:#f00;color:#fff;padding=2px;margin-left:30px;dispaly:inline;}
</ style >
< script type = " text/javascript " >
// var content = document.getElementById("content");
function getPage(page)
{
var key = document.Form1.title.value;
tip.style.display = "inline";
var xmlhttp;
try{
xmlhttp = new ActiveXObject("Msxml2.xmlhttp");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.xmlhttp");
}catch(e){
try{
xmlhttp = new XMLHttpRequest();
alert("no ActiveXObject");
}catch(e){}
}
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState ==4)
{
tip.style.display= "none";
if(xmlhttp.status == 200)
{
//alert(xmlhttp.responseText) ;
content.innerHTML = xmlhttp.responseText;
}
else
{
alert(xmlhttp.status);
}
}
}
xmlhttp.open("get","show.aspx?page=" + page + "&key = " + key );
//alert("show.aspx?page=" + page + "&key = " + key);
xmlhttp.send(null);
}
</ script >
</ HEAD >
< body >
< form id = " Form1 " method = " post " runat = " server " >
< FONT face = " 宋体 " >
< TABLE id = " Table1 " style = " WIDTH: 496px; HEIGHT: 75px " cellSpacing = " 1 " cellPadding = " 1 " width = " 496 "
border = " 0 " >
< TR >
< TD >
< P align = " center " > AJAX实现分页无刷新 </ P >
</ TD >
</ TR >
< TR >
< TD style = " HEIGHT: 12px " > 找查关键字: < INPUT type = " text " id = " title " >< INPUT type = " button " value = " 查找 " onclick = " getPage(1) " >< span id = " tip " style = " display:none " > 正在查找 </ span >
</ TD >
</ TR >
< TR >
< TD >< span id = " content " ></ span ></ TD >
</ TR >
</ TABLE >
</ FONT >
</ form >
</ body >
</ HTML >
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.0 Transitional//EN " >
< HTML >
< HEAD >
< title > WebForm1 </ title >
< meta name = " GENERATOR " Content = " Microsoft Visual Studio .NET 7.1 " >
< meta name = " CODE_LANGUAGE " Content = " C# " >
< meta name = " vs_defaultClientScript " content = " JavaScript " >
< meta name = " vs_targetSchema " content = " http://schemas.microsoft.com/intellisense/ie5 " >
< style type = " text/css " > table {font-size=15px;}
span#tip {background-color:#f00;color:#fff;padding=2px;margin-left:30px;dispaly:inline;}
</ style >
< script type = " text/javascript " >
// var content = document.getElementById("content");
function getPage(page)
{
var key = document.Form1.title.value;
tip.style.display = "inline";
var xmlhttp;
try{
xmlhttp = new ActiveXObject("Msxml2.xmlhttp");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.xmlhttp");
}catch(e){
try{
xmlhttp = new XMLHttpRequest();
alert("no ActiveXObject");
}catch(e){}
}
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState ==4)
{
tip.style.display= "none";
if(xmlhttp.status == 200)
{
//alert(xmlhttp.responseText) ;
content.innerHTML = xmlhttp.responseText;
}
else
{
alert(xmlhttp.status);
}
}
}
xmlhttp.open("get","show.aspx?page=" + page + "&key = " + key );
//alert("show.aspx?page=" + page + "&key = " + key);
xmlhttp.send(null);
}
</ script >
</ HEAD >
< body >
< form id = " Form1 " method = " post " runat = " server " >
< FONT face = " 宋体 " >
< TABLE id = " Table1 " style = " WIDTH: 496px; HEIGHT: 75px " cellSpacing = " 1 " cellPadding = " 1 " width = " 496 "
border = " 0 " >
< TR >
< TD >
< P align = " center " > AJAX实现分页无刷新 </ P >
</ TD >
</ TR >
< TR >
< TD style = " HEIGHT: 12px " > 找查关键字: < INPUT type = " text " id = " title " >< INPUT type = " button " value = " 查找 " onclick = " getPage(1) " >< span id = " tip " style = " display:none " > 正在查找 </ span >
</ TD >
</ TR >
< TR >
< TD >< span id = " content " ></ span ></ TD >
</ TR >
</ TABLE >
</ FONT >
</ form >
</ body >
</ HTML >
请求处理页
using
System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
namespace AJAX现实分页无刷新
{
/**//// <summary>
/// show 的摘要说明。
/// </summary>
public class show : System.Web.UI.Page
{
private int pagesize = 5;
private void Page_Load(object sender, System.EventArgs e)
{
int page =1;
try
{
page = Convert.ToInt32(Request.QueryString["page"]);
}
catch(Exception ee){}
string key = Request.QueryString["key"];
//string key = "p";
int pageCount = getPageCount(key);
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("select top " + pagesize.ToString() +"* from products where productName like '%" + key + "%'");
if(page>1)
{
//Response.Write("DDDD");
sb.Append("and productid not in (select top " + Convert.ToString(pagesize*(page-1)) + " productID from products where productName like '%" +
key + "%' order by productid)");
}
sb.Append(" order by productid ");
//Response.Write(key);
//邦定datagrid
DataGrid dg = new DataGrid();
dg.AutoGenerateColumns = false;
dg.AllowPaging = false;
HyperLinkColumn hlc ;
BoundColumn bc;
hlc = new HyperLinkColumn();
hlc.DataTextField = "productName";
hlc.DataNavigateUrlField = "productID";
hlc.DataNavigateUrlFormatString = "xxx.aspx?id={0}";
hlc.HeaderText = "产品名字";
hlc.ItemStyle.Width = Unit.Pixel(400);
hlc.Target = "_blank";
dg.Columns.Add(hlc);
bc = new BoundColumn();
bc.HeaderText = "产品ID";
bc.DataField = "productID";
bc.ItemStyle.Width = Unit.Pixel(200);
dg.Columns.Add(bc);
dg.DataSource = getData(sb.ToString());
dg.DataBind();
Response.Write(getStringByControl(dg) + "<div id='pager'>" + this.GenPager(page , pagesize , pageCount)+ "</div>" );
}
private string GenPager(int page , int pagesize , int count)
{
System.Text.StringBuilder sb = new System.Text.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.ToString() +")' title='第" + i.ToString() + "页'>[" + i.ToString() + "]</a>");}
}
if(start >1)
{
sb.Insert(0,"<a href='javascript:getPage(1)' title ='首页'>||首页</a>");
sb.Insert(0,"<a href='javascript:getPage(" + Convert.ToString(start -1) + " )' title='第" + Convert.ToString(start-1) + "页'><<</a>" );
}
if(start +10 <pageCount)
{
sb.Append("<a href='javascript:getPage(" + Convert.ToString(start + 10) + ")' title ='第" + Convert.ToString(start +10) + "页'>>></a>");
sb.Append("<a href='javascript:getPage(" + pageCount.ToString() + ")' title ='(末页)'>||末页</a>");
}
return sb.ToString();
}
private string getStringByControl(System.Web.UI.Control c)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter write = new System.IO.StringWriter(sb);
System.Web.UI.HtmlTextWriter htw = new HtmlTextWriter(write);
c.RenderControl(htw);
return sb.ToString();
}
private DataTable getData(string sqlText)
{
SqlDataAdapter da = new SqlDataAdapter(sqlText , "server=.;uid=sa;pwd=;database=northwind;");
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}
private int getPageCount(string key)
{
SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=;database=northwind;");
SqlCommand cmd = new SqlCommand("select count(*) from products where productName like '%" + key + "%'" , conn);
conn.Open();
return Convert.ToInt32(cmd.ExecuteScalar());
}
Web 窗体设计器生成的代码#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
}
}
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
namespace AJAX现实分页无刷新
{
/**//// <summary>
/// show 的摘要说明。
/// </summary>
public class show : System.Web.UI.Page
{
private int pagesize = 5;
private void Page_Load(object sender, System.EventArgs e)
{
int page =1;
try
{
page = Convert.ToInt32(Request.QueryString["page"]);
}
catch(Exception ee){}
string key = Request.QueryString["key"];
//string key = "p";
int pageCount = getPageCount(key);
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("select top " + pagesize.ToString() +"* from products where productName like '%" + key + "%'");
if(page>1)
{
//Response.Write("DDDD");
sb.Append("and productid not in (select top " + Convert.ToString(pagesize*(page-1)) + " productID from products where productName like '%" +
key + "%' order by productid)");
}
sb.Append(" order by productid ");
//Response.Write(key);
//邦定datagrid
DataGrid dg = new DataGrid();
dg.AutoGenerateColumns = false;
dg.AllowPaging = false;
HyperLinkColumn hlc ;
BoundColumn bc;
hlc = new HyperLinkColumn();
hlc.DataTextField = "productName";
hlc.DataNavigateUrlField = "productID";
hlc.DataNavigateUrlFormatString = "xxx.aspx?id={0}";
hlc.HeaderText = "产品名字";
hlc.ItemStyle.Width = Unit.Pixel(400);
hlc.Target = "_blank";
dg.Columns.Add(hlc);
bc = new BoundColumn();
bc.HeaderText = "产品ID";
bc.DataField = "productID";
bc.ItemStyle.Width = Unit.Pixel(200);
dg.Columns.Add(bc);
dg.DataSource = getData(sb.ToString());
dg.DataBind();
Response.Write(getStringByControl(dg) + "<div id='pager'>" + this.GenPager(page , pagesize , pageCount)+ "</div>" );
}
private string GenPager(int page , int pagesize , int count)
{
System.Text.StringBuilder sb = new System.Text.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.ToString() +")' title='第" + i.ToString() + "页'>[" + i.ToString() + "]</a>");}
}
if(start >1)
{
sb.Insert(0,"<a href='javascript:getPage(1)' title ='首页'>||首页</a>");
sb.Insert(0,"<a href='javascript:getPage(" + Convert.ToString(start -1) + " )' title='第" + Convert.ToString(start-1) + "页'><<</a>" );
}
if(start +10 <pageCount)
{
sb.Append("<a href='javascript:getPage(" + Convert.ToString(start + 10) + ")' title ='第" + Convert.ToString(start +10) + "页'>>></a>");
sb.Append("<a href='javascript:getPage(" + pageCount.ToString() + ")' title ='(末页)'>||末页</a>");
}
return sb.ToString();
}
private string getStringByControl(System.Web.UI.Control c)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter write = new System.IO.StringWriter(sb);
System.Web.UI.HtmlTextWriter htw = new HtmlTextWriter(write);
c.RenderControl(htw);
return sb.ToString();
}
private DataTable getData(string sqlText)
{
SqlDataAdapter da = new SqlDataAdapter(sqlText , "server=.;uid=sa;pwd=;database=northwind;");
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}
private int getPageCount(string key)
{
SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=;database=northwind;");
SqlCommand cmd = new SqlCommand("select count(*) from products where productName like '%" + key + "%'" , conn);
conn.Open();
return Convert.ToInt32(cmd.ExecuteScalar());
}
Web 窗体设计器生成的代码#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
}
}
终于实现了我的第一个AJAX程序...........