`

Repeater 控件实现无刷新分页

 
阅读更多

本文讲述的是如何利用 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>条记录&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="设置" onclick="return verify();" /><br />
记录总数为:<asp:Label ID="lblCount" runat="server"></asp:Label>&nbsp;&nbsp;
共分<asp:Label ID="lblPageCount" runat="server"></asp:Label>页&nbsp;&nbsp;
当前为第<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无刷新分页

    在ASP.NET中，我们可以使用AJAX控件工具包（AjaxControlToolkit）中的PagingControl或自己编写JavaScript/jQuery来实现无刷新分页。以下是一个基本的实现步骤： 1. **设置Repeater控件**：在HTML部分，我们创建一个...

    Repeater无刷新分页示例

    "Repeater无刷新分页示例"是一个实现此目标的技术方案，它利用了ICallbackEventHandler接口和GetCallbackEventReference方法来创建一个无需页面完全刷新即可切换分页的Repeater控件。这种技术大大提升了用户体验，...

    Repeater控件绑定数据、分页、数据操作，最佳代码

    2. 分页实现： - 分页功能通过在后台代码中处理PagedDataSource对象实现。`PagedDataSource`类提供了分页支持，可以通过设置`AllowPaging`、`PageSize`属性来开启分页并指定每页记录数。 - `CurrentPageIndex`属性...

    使用AspNetPager对Repeater控件分页简单小例

    通过以上步骤，我们就完成了使用AspNetPager对Repeater控件的分页实现。在实际项目中，可能还需要考虑错误处理、性能优化等细节，但这个小例子已经足够让我们理解基本的分页逻辑和AspNetPager控件的使用方法。 总结...

    ajaxpro无刷新，分页更新repeater_GridView数据源.rar

    标题中的“ajaxpro无刷新，分页更新repeater_GridView数据源”指的是使用AjaxPro技术在ASP.NET环境中实现页面无刷新的分页加载和更新Repeater控件与GridView控件的数据源。AjaxPro是.NET Framework下的一种AJAX库，...

    功能非常好自主研发的自定义Repeater分页控件

    功能非常好自主研发的自定义Repeater分页控件，包括目前较为流行的20多种分页样式，也可定义无刷新分页，支持简洁分页，调用存储过程分页，速度很好，是您页面上的最佳选择，本人还有许多其它的一些控件，如有需要可...

    Repeater控件无限级显示菜单

    本项目利用Visual Studio 2010（VS2010）作为开发工具，结合SQL Server 2005或更高版本的数据库，通过Repeater控件实现了无限级菜单的展示，并具备增、删、改、查的功能。以下将详细介绍这个知识点及其实施步骤。 ...

    repeater控件运用

    例如，可以结合Entity Framework或ADO.NET从数据库获取数据，然后用Repeater控件来显示，同时可以添加分页按钮，通过AJAX实现无刷新分页。 六、扩展使用 1. **使用CSS类**：通过ItemTemplate中的CSS类，可以轻松...

    一个基于Repeater+C#实现的的翻页控件源码程序

    这个程序可能还包括一些额外的优化，比如缓存策略来减少数据库查询，或者AJAX无刷新分页来提高交互性。在实际开发中，开发者可能还需要考虑SEO（搜索引擎优化）问题，因为纯JavaScript的分页可能会导致搜索引擎无法...

    自定义控件之万能Repeater源码

    总的来说，"自定义控件之万能Repeater源码"是一个极好的学习资源，对于想要深入理解和掌握Repeater控件的开发者而言，它提供了实际操作的机会，帮助他们在实现复杂列表功能时更加游刃有余。通过对该项目的分析和实践...

    repeater等公共类分页代码

    本资源“repeater等公共类分页代码”提供了一种实现Repeater控件分页的方法，通过创建可复用的公共类，使得分页功能在多个页面间共享，降低代码冗余，提高代码的可维护性。 首先，我们需要理解Repeater控件的基本...

    【ASP.NET编程知识】ASP.Net分页的分页导航实例.docx

    ASP.NET 提供了多种分页方式，包括基于 Diesel、Repeater 和 DataList 等控件实现分页。今天，我们将讨论基于 JavaScript 实现的 ASP.NET 分页导航实例。 分页导航的实现 在 ASP.NET 中，分页导航可以通过 ...

    分页控件aspnet分页。很好用

    使用AJAX技术，可以实现页面无刷新分页，提高用户体验。 6. **UI设计**：分页控件的外观也很重要，开发者可能在“Pager.cs”中实现了自定义样式，包括页码按钮的布局、颜色、字体等，以符合网站的整体设计。 7. **...

    asp.net 分页控件

    此外，该控件还可以配合AJAX技术，实现页面无刷新的分页效果，提高用户体验。 总之，ASP.NET分页控件，特别是像AspNetPager.dll这样的第三方组件，为开发者提供了强大且灵活的数据分页解决方案。通过熟练掌握这些...

    web_repeater分页

    下面我们将深入探讨这个主题，包括分页的基本概念、Repeater控件的使用以及如何结合分页实现高效的数据展示。 1. **分页基础** - **目的**：分页的主要目的是优化页面性能，避免一次性加载过多数据导致浏览器卡顿...

    Repeater\DataList\GridView实现分页,数据编辑与删除

    1. Repeater控件： Repeater是最灵活的数据绑定控件，它允许开发者完全自定义数据显示的HTML结构。尽管它不提供内置的分页功能，但通过编程方式可以实现分页。通常，我们需要在后端代码中处理分页逻辑，然后重新绑定...

    Repeater分页显示

    3. 绑定数据：将分页后的数据绑定到Repeater控件。 4. 控制按钮状态：根据当前页码调整页码按钮的可用性。 5. 事件处理：响应用户点击分页按钮，更新页面并重新绑定数据。 这种实现方式虽然简单，但适用于展示简单...

    Ajax三级联动和无刷新分页源码_aspx开发教程.7z

    在ASP.NET（.aspx）开发中，实现Ajax三级联动和无刷新分页需要以下步骤： 1. **创建控件**：首先，你需要在页面上放置三个下拉列表框（DropdownList）来表示三级联动，并设置它们的初始值。同时，添加一个分页控件...

    asp.net2.0 分页控件

    5. CSS和JavaScript：为了实现与淘宝类似的用户体验，可能需要使用CSS进行样式定制，使分页看起来更加直观和吸引人，同时可能还需要JavaScript来增强用户体验，例如通过AJAX实现无刷新分页。 6. 性能优化：在处理...

Magicbox
Global site tag (gtag.js) - Google Analytics