ajax 笔记--不用刷新实现数据的分页显示
开发环境是VS 2005 + sql 2005
首先打开 VS 2005 新建一个网站项目,建立完之后, 添加一个WebForm页面(我这里叫DataGrid_Color.aspx)，在html代码里。我的html里代码如下代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataGrid_Color.aspx.cs" Inherits="Ajax_Color_DataGrid_Color" %>
<!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>
<script type="text/javascript" src="../JavaScripts/DataGrid_Color.js"></script>
<style type="text/css">
div{font-size:12px};
</style>
</head>
<body onload="OnLoad_ShowAllGuestBookInformation();">
<form id="form1" runat="server">
<div></div>
<div id="GuestBook"></div>
<div id="pageNumber"></div>
</form>
</body>
</html>
// JScript 文件
//窗体加载时，显示出数据来
function OnLoad_ShowAllGuestBookInformation()
{
var response = Ajax_Color_DataGrid_Color.ShowAllContentGuestBookInformation();//这里调用DataGrid_Color.aspx.cs里的ShowAllContentGuestBookInformation()方法
if(response == null)
{
alert(response.error);//发生错误时，显示出错误信息
}
else
{
showAllGuestBookInformation( response );
}
}
function NewData(i) //下面是
{
var response = Ajax_Color_DataGrid_Color.NewData(i,3);
if(response == null)
{
alert(response.error);
}
else
{
showAllGuestBookInformation( response );
}
}
function showAllGuestBookInformation( response )
{
var allGuestBookInformation = response.value.split("~");
var NickName = allGuestBookInformation[0].split("|");
var QQ = allGuestBookInformation[1].split("|");
var Tel = allGuestBookInformation[2].split("|")
var MSN = allGuestBookInformation[3].split("|");
var Content = allGuestBookInformation[4].split("|");
var IssueTime = allGuestBookInformation[5].split("|");
var guestBookID = allGuestBookInformation[6].split("|");
var aa="";
//我这因为数据量不大，所以就每次就只显示了三第记录,这里当然你可以自己修改大小
if( NickName.length > 3)
{
for(var i=0 ; i < 3 ; i++)
{
if(i%2==1)
{
aa += '<tr style="background-color:White;">';
}
else
{
aa += '<tr style="background-color:#EFF3FB;">'
}
aa += '<td>' + guestBookID[i] + '</td><td>' + NickName[i] + '</td><td>' + QQ[i] + '</td><td>' + MSN[i] + '</td><td>' + Content[i] + '</td><td>' + IssueTime[i] + '</td><td><a href="javascript:EditGuestBook(' + guestBookID[i] + ')";style="Color:#303030;">编辑</a></td><td><a href="../Ajax_Color/abc.aspx?abc=' + guestBookID[i] + '" target="_blank">转到</a><td><tr>';
}
}
else
{
//这个主要是为了，防止最后一个几条数据，如余下了一条，那么此时你就得显示出一条记录出来，而不能向上面一样，显示出三条记录
for(var i=0 ; i < NickName.length-1 ; i++)
{
if(i%2==1)
{
aa += '<tr style="background-color:White;">';
}
else
{
aa += '<tr style="background-color:#EFF3FB;">'
}
aa += '<td>' + guestBookID[i] + '</td><td>' + NickName[i] + '</td><td>' + QQ[i] + '</td><td>' + MSN[i] + '</td><td>' + Content[i] + '</td><td>' + IssueTime[i] + '</td><td><a href="javascript:EditGuestBook(' + guestBookID[i] + ')";style="Color:#303030;">编辑</a></td><td><a href="../Ajax_Color/abc.aspx?abc=' + guestBookID[i] + '" target="_blank">转到</a><td><tr>';
}
}
var RecordRows = Ajax_Color_DataGrid_Color.GuestBookRows().value;//这里是把有多少条记录显示出来．
var number = RecordRows/3;
var bb = "";
if( number > parseInt(number))
{
number ++;
}
for(var i=1;i<= number ;i++)
{
bb +='<td><a href="javascript:NewData('+ i + ')"> ' + i +'</a></td>' //这里添加相应的函数，当点击其中某一数字时，用来显示你要看哪此记录的数据
}
bb = '<table><tr>'+ bb + '</tr></table>';
document.getElementById("GuestBook").innerHTML = '<table cellspacing="0" cellpadding="4" border="0" id="DataGrid1" style="color:#333333;border-collapse:collapse;"><td colspan="8">' + bb + '<tr style="color:White;background-color:#507CD1;font-weight:bold;"><td>ID号</td><td>昵称</td><td>QQ号码</td><td>MSN地址</td><td>内容</td><td>发布时间</td><td>查看</td><td>转到</td></tr><tr style="background-color:#EFF3FB;">' + aa + '</table>';
}
//下面这里就添加相应的编辑代码．
function EditGuestBook(i)
{
//这里怎么编辑，可以看我前面写的一个留言版，那里有具体怎么实编辑的．
alert(i);
}
下面是DataGrid1.aspx.cs代码
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using GetCommand;
using System.Text;
public partial class Ajax_Color_DataGrid_Color : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!this.IsPostBack)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Ajax_Color_DataGrid_Color));
}
}
/// <summary>
/// 这个是窗体加时调用的，
/// </summary>
/// <returns></returns>
[AjaxPro.AjaxMethod]
public string ShowAllContentGuestBookInformation()
{
DataSet ds = SetConnection.getDataSet("select * from guestBook","guestBook");
string aa = this.guestBookDataSet(ds,"guestBook");
return aa;
}
/// <summary>
/// 显示新的数据，也就是当点击数字时，满足条件的记录取出来
/// </summary>
/// <param name="i">传来的数字,就是要看第几页里</param>
/// <param name="rows">每页显示几条数据</param>
/// <returns>string</returns>
[AjaxPro.AjaxMethod]
public string NewData(int i, int rows)
{
string strsql = "select * from (select (row_number() over(order by guestBookId desc )) as rownumber ,* from guestBook) as gb where gb.RowNumber > " + rows * (i-1) + " AND gb.RowNumber <= " + rows * i;
DataSet dataset = SetConnection.getDataSet( strsql,"NewData" );
string aa = guestBookDataSet(dataset,"NewData");
return aa;
}
/// <summary>
/// 返回有多条记录．
/// </summary>
/// <returns></returns>
[AjaxPro.AjaxMethod]
public string GuestBookRows()
{
string count = SetConnection.ExecuteScalar("select count(*) from guestBook");
return count;
}
/// <summary>
/// 返回要查看留言信息的数据
/// </summary>
/// <param name="ds">数据集</param>
/// <param name="tableName">在数据集当中，表的名称</param>
/// <returns>string</returns>
private string guestBookDataSet(DataSet ds,string tableName)
{
StringBuilder GuestBookID = new StringBuilder();
StringBuilder NickName = new StringBuilder();
StringBuilder QQ = new StringBuilder();
StringBuilder Tel = new StringBuilder();
StringBuilder MSN = new StringBuilder();
StringBuilder Content = new StringBuilder();
StringBuilder IssueTime = new StringBuilder();
foreach (DataRow dr in ds.Tables[tableName].Rows)
{
NickName.Append(dr["NickName"].ToString()).Append("|");
QQ.Append(dr["QQ"].ToString()).Append("|");
Tel.Append(dr["Tel"].ToString()).Append("|");
MSN.Append(dr["MSN"].ToString()).Append("|");
Content.Append(dr["Content"].ToString()).Append("|");
IssueTime.Append(dr["IssueTime"].ToString()).Append("|");
GuestBookID.Append(dr["guestBookID"].ToString()).Append("|");
}
string returnData = NickName.ToString() + "~" + QQ.ToString() + "~" + Tel.ToString() + "~" + MSN.ToString() + "~" + Content.ToString() + "~" + IssueTime.ToString() + "~" + GuestBookID.ToString();
return returnData;
}
}
首先打开 VS 2005 新建一个网站项目,建立完之后, 添加一个WebForm页面(我这里叫DataGrid_Color.aspx)，在html代码里。我的html里代码如下代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataGrid_Color.aspx.cs" Inherits="Ajax_Color_DataGrid_Color" %>
<!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> <script type="text/javascript" src="../JavaScripts/DataGrid_Color.js"></script> <style type="text/css"> div{font-size:12px};
div </style></head><body onload="OnLoad_ShowAllGuestBookInformation();"> <form id="form1" runat="server"> <div></div> <div id="GuestBook"></div> <div id="pageNumber"></div> </form></body></html>第一步当然得把javascript脚本引用进来，然后我这里在<body>的onload方法里加入 "OnLoad_ShowAllGuestBookInformation();"，用来窗体加载时，就把数据提取出来。添加一个ID为GuestBook的DIV在网页上，这个就是用来显示数据的。
下面代码是js里的代码。
// JScript 文件//窗体加载时，显示出数据来function OnLoad_ShowAllGuestBookInformation(){ var response = Ajax_Color_DataGrid_Color.ShowAllContentGuestBookInformation();//这里调用DataGrid_Color.aspx.cs里的ShowAllContentGuestBookInformation()方法 if(response == null) { alert(response.error);//发生错误时，显示出错误信息 } else { showAllGuestBookInformation( response ); }}function NewData(i) //下面是{ var response = Ajax_Color_DataGrid_Color.NewData(i,3); if(response == null) { alert(response.error); } else { showAllGuestBookInformation( response ); }}function showAllGuestBookInformation( response ){ var allGuestBookInformation = response.value.split("~"); var NickName = allGuestBookInformation[0].split("|"); var QQ = allGuestBookInformation[1].split("|"); var Tel = allGuestBookInformation[2].split("|") var MSN = allGuestBookInformation[3].split("|"); var Content = allGuestBookInformation[4].split("|"); var IssueTime = allGuestBookInformation[5].split("|"); var guestBookID = allGuestBookInformation[6].split("|"); var aa=""; //我这因为数据量不大，所以就每次就只显示了三第记录,这里当然你可以自己修改大小 if( NickName.length > 3) { for(var i=0 ; i < 3 ; i++) { if(i%2==1) { aa += '<tr style="background-color:White;">'; } else { aa += '<tr style="background-color:#EFF3FB;">' } aa += '<td>' + guestBookID[i] + '</td><td>' + NickName[i] + '</td><td>' + QQ[i] + '</td><td>' + MSN[i] + '</td><td>' + Content[i] + '</td><td>' + IssueTime[i] + '</td><td><a href="javascript:EditGuestBook(' + guestBookID[i] + ')";style="Color:#303030;">编辑</a></td><td><a href="../Ajax_Color/abc.aspx?abc=' + guestBookID[i] + '" target="_blank">转到</a><td><tr>'; } } else { //这个主要是为了，防止最后一个几条数据，如余下了一条，那么此时你就得显示出一条记录出来，而不能向上面一样，显示出三条记录 for(var i=0 ; i < NickName.length-1 ; i++) { if(i%2==1) { aa += '<tr style="background-color:White;">'; } else { aa += '<tr style="background-color:#EFF3FB;">' } aa += '<td>' + guestBookID[i] + '</td><td>' + NickName[i] + '</td><td>' + QQ[i] + '</td><td>' + MSN[i] + '</td><td>' + Content[i] + '</td><td>' + IssueTime[i] + '</td><td><a href="javascript:EditGuestBook(' + guestBookID[i] + ')";style="Color:#303030;">编辑</a></td><td><a href="../Ajax_Color/abc.aspx?abc=' + guestBookID[i] + '" target="_blank">转到</a><td><tr>'; } } var RecordRows = Ajax_Color_DataGrid_Color.GuestBookRows().value;//这里是把有多少条记录显示出来． var number = RecordRows/3; var bb = ""; if( number > parseInt(number)) { number ++; } for(var i=1;i<= number ;i++) { bb +='<td><a href="javascript:NewData('+ i + ')"> ' + i +'</a></td>' //这里添加相应的函数，当点击其中某一数字时，用来显示你要看哪此记录的数据 } bb = '<table><tr>'+ bb + '</tr></table>'; document.getElementById("GuestBook").innerHTML = '<table cellspacing="0" cellpadding="4" border="0" id="DataGrid1" style="color:#333333;border-collapse:collapse;"><td colspan="8">' + bb + '<tr style="color:White;background-color:#507CD1;font-weight:bold;"><td>ID号</td><td>昵称</td><td>QQ号码</td><td>MSN地址</td><td>内容</td><td>发布时间</td><td>查看</td><td>转到</td></tr><tr style="background-color:#EFF3FB;">' + aa + '</table>';}//下面这里就添加相应的编辑代码．function EditGuestBook(i){ //这里怎么编辑，可以看我前面写的一个留言版，那里有具体怎么实编辑的． alert(i);}using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using GetCommand;using System.Text;public partial class Ajax_Color_DataGrid_Color : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { if(!this.IsPostBack) { AjaxPro.Utility.RegisterTypeForAjax(typeof(Ajax_Color_DataGrid_Color)); } } /// <summary> /// 这个是窗体加时调用的， /// </summary> /// <returns></returns> [AjaxPro.AjaxMethod] public string ShowAllContentGuestBookInformation() { DataSet ds = SetConnection.getDataSet("select * from guestBook","guestBook"); string aa = this.guestBookDataSet(ds,"guestBook"); return aa; } /// <summary> /// 显示新的数据，也就是当点击数字时，满足条件的记录取出来 /// </summary> /// <param name="i">传来的数字,就是要看第几页里</param> /// <param name="rows">每页显示几条数据</param> /// <returns>string</returns> [AjaxPro.AjaxMethod] public string NewData(int i, int rows) { string strsql = "select * from (select (row_number() over(order by guestBookId desc )) as rownumber ,* from guestBook) as gb where gb.RowNumber > " + rows * (i-1) + " AND gb.RowNumber <= " + rows * i; DataSet dataset = SetConnection.getDataSet( strsql,"NewData" ); string aa = guestBookDataSet(dataset,"NewData"); return aa; } /// <summary> /// 返回有多条记录． /// </summary> /// <returns></returns> [AjaxPro.AjaxMethod] public string GuestBookRows() { string count = SetConnection.ExecuteScalar("select count(*) from guestBook"); return count; } /// <summary> /// 返回要查看留言信息的数据 /// </summary> /// <param name="ds">数据集</param> /// <param name="tableName">在数据集当中，表的名称</param> /// <returns>string</returns> private string guestBookDataSet(DataSet ds,string tableName) { StringBuilder GuestBookID = new StringBuilder(); StringBuilder NickName = new StringBuilder(); StringBuilder QQ = new StringBuilder(); StringBuilder Tel = new StringBuilder(); StringBuilder MSN = new StringBuilder(); StringBuilder Content = new StringBuilder(); StringBuilder IssueTime = new StringBuilder(); foreach (DataRow dr in ds.Tables[tableName].Rows) { NickName.Append(dr["NickName"].ToString()).Append("|"); QQ.Append(dr["QQ"].ToString()).Append("|"); Tel.Append(dr["Tel"].ToString()).Append("|"); MSN.Append(dr["MSN"].ToString()).Append("|"); Content.Append(dr["Content"].ToString()).Append("|"); IssueTime.Append(dr["IssueTime"].ToString()).Append("|"); GuestBookID.Append(dr["guestBookID"].ToString()).Append("|"); } string returnData = NickName.ToString() + "~" + QQ.ToString() + "~" + Tel.ToString() + "~" + MSN.ToString() + "~" + Content.ToString() + "~" + IssueTime.ToString() + "~" + GuestBookID.ToString(); return returnData; }}数据表的结构，还是前面那留言版那表的结构，
