首先打开 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; }}数据表的结构，还是前面那留言版那表的结构，