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

最新推荐文章于 2024-08-15 22:10:13 发布

chenying998179

最新推荐文章于 2024-08-15 22:10:13 发布

阅读量508

点赞数

文章标签： ajax datagrid string javascript function div

本文链接：https://blog.csdn.net/chenying998179/article/details/2144523

版权

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

第一步当然得把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;

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;

}

数据表的结构，还是前面那留言版那表的结构，

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1349088

chenying998179

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 笔记--不用刷新实现数据的分页显示

开发环境是VS 2005 + sql 2005首先打开 VS 2005 新建一个网站项目,建立完之后, 添加一个WebForm页面(我这里叫DataGrid_Color.aspx)，在html代码里。我的html里代码如下代码...@ Page Language="C#" AutoEventWireup="true" CodeFile="DataGrid_Color.aspx.cs" In
复制链接

扫一扫