本文讲述的是如何利用 XMLHttpRequest 来对 Repeater 控件 进行无刷新分页。
实现的方式是，使用XMLHttpRequest对象异步向服务器发送post 请求，传递设置好的每页显示记录数，当前页码和记录总数。服务器端接收到请求时，根据参数从数据库中查询相应记录，并通过Repeater 控件将数据显示出来，然后调用Repeater 的RenderControl 方法 将Repeater 绑定后生成的HTML代码作为服务器端的响应文本返回给客户端，客户端接到响应后替换Repeater 的相应HTML代码，从而实现了Repeater 无刷新分页。
需要注意的地方：
1、显示首页记录时，首页和上一页不可用，同理，显示末页记录时，末页和下一页不可用。
2、重新设置每页显示记录数时，要保持当前的页码不变，分页数改变。
下面看代码实现:
首先，创建一个WEB窗体，命名为 RepeaterDemo.aspx
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RepeaterDemo.aspx.cs" Inherits="RepeaterDemo" %>
<!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>
<style>
<!--
.n{TEXT-DECORATION:none;cursor:pointer} a{color:black} a:hover{color:blue}
.m{TEXT-DECORATION:none;cursor:default} a{color:black}
//-->
</style>
<script type="text/javascript">
var xmlHttp=null;
var index,size="10";
function $(id)
{
return document.getElementById(id);
}
function createXMLHttpRequest()
{
if(xmlHttp == null){
if(window.XMLHttpRequest) {
//Mozilla 浏览器
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject) {
// IE浏览器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert('创建失败');
}
}
}
}
}
function openAjax(para)
{
if( xmlHttp == null)
{
createXMLHttpRequest();
if( xmlHttp == null)
{
alert('出错');
return ;
}
}
xmlHttp.open("post","RepeaterDemoResult.aspx?date="+new Date().getTime(),true);
xmlHttp.onreadystatechange=xmlHttpChange;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(para);
}
function xmlHttpChange()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
$('resultDiv').innerHTML=xmlHttp.responseText;
$('<%=lblCurrentPage.ClientID %>').innerText=index==null?$('<%=lblCurrentPage.ClientID %>').innerText:index;
if(index==1)
{
$('<%=lbtnFirst.ClientID %>').disabled=true;
$('<%=lbtnPrevious.ClientID %>').disabled=true;
$('<%=lbtnFirst.ClientID %>').className='m';
$('<%=lbtnPrevious.ClientID %>').className='m';
}
else
{
$('<%=lbtnFirst.ClientID %>').disabled='';
$('<%=lbtnPrevious.ClientID %>').disabled='';
$('<%=lbtnFirst.ClientID %>').className='n';
$('<%=lbtnPrevious.ClientID %>').className='n';
}
if(index==document.getElementById('<%=lblPageCount.ClientID %>').innerText)
{
$('<%=lbtnNext.ClientID %>').disabled=true;
$('<%=lbtnLast.ClientID %>').disabled=true;
$('<%=lbtnNext.ClientID %>').className='m';
$('<%=lbtnLast.ClientID %>').className='m';
}
else
{
$('<%=lbtnNext.ClientID %>').disabled=false;
$('<%=lbtnLast.ClientID %>').disabled=false;
$('<%=lbtnNext.ClientID %>').className='n';
$('<%=lbtnLast.ClientID %>').className='n';
}
}
}
}
function getHTML(operate)
{
if(event.srcElement.disabled)
{
return;
}
var currentPage;
var pageSize=$('<%=txtPageSize.ClientID %>').value;
var count=$('<%=lblCount.ClientID %>').innerText;
if(operate=='f')
{
currentPage=1;
}
else if(operate=='p')
{
currentPage=parseInt($('<%=lblCurrentPage.ClientID %>').innerText)-1;
}
else if(operate=='n')
{
currentPage=parseInt($('<%=lblCurrentPage.ClientID %>').innerText)+1;
}
else if(operate=='l')
{
currentPage=$('<%=lblPageCount.ClientID %>').innerText;
}
else if(operate=='c')
{
currentPage=$('<%=lblCurrentPage.ClientID %>').innerText;
if(pageSize==size)
{
return ;
}
size=pageSize;
}
else
{
return ;
}
index=currentPage;
var para="pageNum="+currentPage+"&pageSize="+pageSize+"&count="+count;
openAjax(para);
}
function verify()
{
if(isNaN(parseInt($('<%=txtPageSize.ClientID %>').value)))
{
alert('请输入数字！');
return false;
}
getHTML('c');
var count=parseInt($('<%=lblCount.ClientID %>').innerText);
if(isNaN(count))
{
return;
}
var pageCount=(count%size==0)?count/size:(count-(count%size))/size+1;
$('<%=lblPageCount.ClientID %>').innerText=pageCount;
var temp=parseInt($('<%=lblCurrentPage.ClientID %>').innerText);
if(pageCount<temp)
{
$('<%=lblCurrentPage.ClientID %>').innerText=pageCount;
index=pageCount;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id='resultDiv' style="cursor:auto">
<asp:Repeater ID="rp" runat="server">
<HeaderTemplate>
<table><tr><td>编号</td><td>名称</td><td>价格</td><td>库存</td></tr>
</HeaderTemplate>
<AlternatingItemTemplate><tr><td><%#Eval("ProductID") %></td><td><%#Eval("ProductName") %></td><td><%#Eval("UnitPrice") %></td><td><%#Eval("UnitsInStock") %></td></tr></AlternatingItemTemplate>
<ItemTemplate><tr><td><%#Eval("ProductID") %></td><td><%#Eval("ProductName") %></td><td><%#Eval("UnitPrice") %></td><td><%#Eval("UnitsInStock") %></td></tr></ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
每页显示<asp:TextBox ID="txtPageSize" runat="server" Text="10"></asp:TextBox>条记录 <input type="button" value="设置" onclick="return verify();" /><br />
记录总数为:<asp:Label ID="lblCount" runat="server"></asp:Label>
共分<asp:Label ID="lblPageCount" runat="server"></asp:Label>页
当前为第<asp:Label ID="lblCurrentPage" runat="server"></asp:Label>页<br />
<asp:LinkButton ID="lbtnFirst" CssClass='n' OnClientClick="getHTML('f');return false;" Text="首页" runat="server"></asp:LinkButton>
<asp:LinkButton ID="lbtnPrevious" CssClass='n' OnClientClick="getHTML('p');return false;" Text="上页" runat="server"></asp:LinkButton>
<asp:LinkButton ID="lbtnNext" CssClass='n' OnClientClick="getHTML('n');return false;" Text="下页" runat="server"></asp:LinkButton>
<asp:LinkButton ID="lbtnLast" CssClass='n' OnClientClick="getHTML('l');return false;" Text="末页" runat="server"></asp:LinkButton>
</form>
</body>
</html>
.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 System.Data.SqlClient;
using System.Text;
public partial class RepeaterDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
using (SqlConnection con=new SqlConnection("server=.;uid=sa;pwd=sa;database=Northwind"))
{
SqlDataAdapter sda = new SqlDataAdapter("select count(*) from products", con);
DataSet ds = new DataSet();
sda.Fill(ds, "productsCount");
lblCount.Text = ds.Tables["productsCount"].Rows[0][0].ToString();
sda = new SqlDataAdapter("select * from products", con);
int count, pageCount, pageSize,currentPage;
int.TryParse(txtPageSize.Text, out pageSize);
pageSize = pageSize == 0 ? 10 : pageSize;
int.TryParse(lblCount.Text, out count);
pageCount = count % pageSize == 0 ? count / pageSize : count / pageSize + 1;
lblPageCount.Text = pageCount.ToString();
sda.Fill(ds, 0, pageSize, "products");
lblCurrentPage.Text = "1";
currentPage = 1;
rp.DataSource = ds.Tables["products"].DefaultView;
rp.DataBind();
//lbtnFirst.Enabled = false;
//lbtnPrevious.Enabled = false;
StringBuilder sb = new StringBuilder();
sb.Append("document.getElementById('" + lbtnFirst.ClientID + "').disabled=true;");
sb.Append("document.getElementById('" + lbtnPrevious.ClientID + "').disabled=true;"); if (pageCount == currentPage)
{
//lbtnNext.Enabled = false;
//lbtnLast.Enabled = false;
sb.Append("document.getElementById('" + lbtnNext.ClientID + "').disabled=true;");
sb.Append("document.getElementById('" + lbtnLast.ClientID + "').disabled=true;");
}//end if block
ClientScript.RegisterStartupScript(GetType(), "disabled", "<script>" + sb.ToString() + "</script>");
}//end using block
}//end if block
}//end Page_Load event
}
然后创建服务器端接收XMLHttpRequest 请求的文件，这里用的是WEB窗体，命名为 RepeaterDemoResult.aspx
.aspx 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RepeaterDemoResult.aspx.cs" Inherits="RepeaterDemoResult" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater ID="rp" runat="server">
<HeaderTemplate>
<table><tr><td>编号</td><td>名称</td><td>价格</td><td>库存</td></tr>
</HeaderTemplate>
<AlternatingItemTemplate>
<tr><td><%#Eval("ProductID") %></td><td><%#Eval("ProductName") %></td><td><%#Eval("UnitPrice") %></td><td><%#Eval("UnitsInStock") %></td></tr>
</AlternatingItemTemplate>
<ItemTemplate>
<tr><td><%#Eval("ProductID") %></td><td><%#Eval("ProductName") %></td><td><%#Eval("UnitPrice") %></td><td><%#Eval("UnitsInStock") %></td></tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
.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 System.Data.SqlClient;
using System.IO;
public partial class ajax_xmlHttpRequest_RepeaterDemoResult : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
using (SqlConnection con = new SqlConnection("server=.;uid=sa;pwd=sa;database=Northwind"))
{
SqlDataAdapter sda = new SqlDataAdapter("select * from products", con);
DataSet ds = new DataSet();
int count, pageSize, currentPage;
int.TryParse(Request.Form["pageSize"], out pageSize);
pageSize = pageSize == 0 ? 10 : pageSize;
int.TryParse(Request.Form["count"], out count);
int.TryParse(Request.Form["pageNum"], out currentPage);
int tempCount = count % pageSize == 0 ? count / pageSize : count / pageSize + 1;
if (tempCount < currentPage)
{
currentPage = tempCount;
}
sda.Fill(ds, (currentPage - 1) * pageSize, pageSize, "products");
rp.DataSource = ds.Tables["products"].DefaultView;
rp.DataBind();
Response.Clear();
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
rp.RenderControl(htw);
Response.Write(sw.ToString());
Response.End();
}
}
}
程序到这里已经完成了，可以运行看效果了。如果觉得样式简单，可以设置CSS来美观，这里主要是实现功能。
相关推荐
功能非常好自主研发的自定义Repeater分页控件，包括目前较为流行的20多种分页样式，也可定义无刷新分页，支持简洁分页，调用存储过程分页，速度很好，是您页面上的最佳选择，本人还有许多其它的一些控件，如有需要可...
2.无刷新; 3.高效简洁; 4.基于jquery和.net(vs2008),适合GridView,Repeater等一切数据控件;(有时间再做一个java版的, 当然, 其实思路是一样的, java的同志也可以下载了研究一下, 不难的); 5.没有用数据库,而是用一个...
2.无刷新; 3.高效简洁; 4.基于jquery和.net(vs2008),适合GridView,Repeater等一切数据控件;(有时间再做一个java版的, 当然, 其实思路是一样的, java的同志也可以下载了研究一下, 不难的); 5.没有用数据库,而是用一个...
在ASP.NET 中有很多数据展现的控件，比如Repeater、GridView，用的最多的GridView，它同时也自带了分页的功能。但是我们知道用GridView来显示数据，如果没有禁用ViewState，页面的大小会是非常的大的。而且平时我们...
本控件可以对GridView,Repeater,DataGrid,DataList…几乎所有的.net数据绑定控件进行分页，全部无刷新，数据绑定部分可以使用存储过程也可以直接使用sql语句，这对本控件没有任何干扰！本控件具有较好的用户界面，...
0457 如何实现DataList Web服务器控件分页功能 258 0458 实现查看DataList控件中数据的详细信息 259 0459 如何在DataList控件中创建多个列 260 0460 如何实现DetailsView 控件分页功能 261 0461 将...
示例代码下载: ...本文中所包含的内容如下: * 准备 * 主要功能 * 绑定字段 * 字段表达式 * 绑定属性 * 属性表达式 * 基本设置 * 设置分页 * 设置字段 * 设置调用的服务端方法 * 请求/返回数据的格式 *
0457 如何实现DataList Web服务器控件分页功能 258 0458 实现查看DataList控件中数据的详细信息 259 0459 如何在DataList控件中创建多个列 260 0460 如何实现DetailsView 控件分页功能 261 0461 将DataSet...
105.如何实现Repeater控件的分页 106.如何使用DataList控件显示数据 107.如何实现选择DataList控件中的条目后显示该条目的详细信息 108.如何实现DataList控件的编辑功能 109.如何对DataList控件使用样式 110....
如何实现Repeater控件的分页 106.如何使用DataList控件显示数据 107.如何实现选择DataList控件中的条目后显示该条目的详细信息 108.如何实现DataList控件的编辑功能 109.如何对DataList控件使用样式...
9.6.4 DataList 分页实现 9.6.5 使用SQLHelper 操作数据库 9.7 小结 第 10 章访问其他数据源 10.1 使用ODBC .NET Data Provider 第一篇窗口与界面编程 15 10.1.1 ODBC .NET Data Provider 简介 10.1.2 建立连接 10.2...
9.6.4 DataList分页实现 9.6.5 使用SQLHelper操作数据库 9.7 小结 第10章 访问其他数据源 10.1 使用ODBC .NET Data Provider 10.1.1 ODBC .NET Data Provider简介 10.1.2 建立连接 10.2 使用OLE DB.NET Data ...
9.6.4 DataList分页实现 9.6.5 使用SQLHelper操作数据库 9.7 小结 第10章 访问其他数据源 10.1 使用ODBC .NET Data Provider 10.1.1 ODBC .NET Data Provider简介 10.1.2 建立连接 10.2 使用OLE DB.NET Data ...
9.6.4 DataList分页实现 9.6.5 使用SQLHelper操作数据库 9.7 小结 第10章 访问其他数据源 10.1 使用ODBC .NET Data Provider 10.1.1 ODBC .NET Data Provider简介 10.1.2 建立连接 10.2 使用OLE DB.NET Data ...
9.6.4 DataList分页实现 9.6.5 使用SQLHelper操作数据库 9.7 小结 第10章 访问其他数据源 10.1 使用ODBC .NET Data Provider 10.1.1 ODBC .NET Data Provider简介 10.1.2 建立连接 10.2 使用OLE DB.NET Data ...
9.6.4 DataList分页实现 9.6.5 使用SQLHelper操作数据库 9.7 小结 第10章 访问其他数据源 10.1 使用ODBC .NET Data Provider 10.1.1 ODBC .NET Data Provider简介 10.1.2 建立连接 10.2 使用OLE DB.NET Data ...
主要功能： 1.为asp.net数据绑定控件提供自定义分页功能，支持数据控件：GridView,DataList,DataGrid,Repeater...支持绝大多收数据控件； 2.可控制的自定义分页导航界面...4.全部ajax操作，无刷新更新数据控件数据。
100 <br>0158 如何将二进制数转换为十六进制数 100 <br>0159 如何实现0～9之间随机整数 101 <br>0160 如何实现0～1之间随机数 101 <br>0161 如何返回数字的绝对值 101 <br>5.2 控件数据处理...