ajax 笔记–不用刷新实现数据的分页显示

现在的位置: 首页 > 综合 > 正文

RSS

ajax 笔记–不用刷新实现数据的分页显示

2014年01月20日 ⁄ 综合 ⁄ 共 4755字 ⁄ 字号小中大 ⁄ 评论关闭

开发环境是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">

<title>实现分页显示</title>

div{font-size:12px};

</style>

</head>

</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;">'

}

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;