Repeater 无刷新分页
原文：http://blog.csdn.net/Sandy945/archive/2009/05/22/4208998.aspx
本文讲述的是如何利用 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;<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 无刷新分页的更多相关文章
- 自己动手用Javascript写一个无刷新分页控件
.NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
- phpcms无刷新分页
控制器添加一个函数: 添加一个静态页面ajax_message.html,在页面中添加如下代码: 在要分页的页面(我的是"show"页面)中添加如上图代码: phpcms无刷新分页 ...
- MVC无刷新分页（即局部刷新，带搜索，页数选择，排序功能）
我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的. ...
- 扩展GridView实现的一个自定义无刷新分页，排序，支持多种数据源的控件TwfGridView
最近项目View层越来越趋向于无刷新化,特别是数据展示方面,还要对Linq有很好的支持.在WebFrom模式的开发中,GridView是一个功能很强大,很常用的控件,但是他也不是完美的,没有自带的无刷 ...
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- ASP.NET Ajax简单的无刷新分页
最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...
- 无刷新分页 jquery.pagination.js
无刷新分页 jquery.pagination.js 采用Jquery无刷新分页插件jquery.pagination.js实现无刷新分页效果 1.插件参数列表 http://www.dtan.so ...
随机推荐
- TF卡速度测试对比 Class数越高速度越快
存储卡(TF卡)是手机扩展存储的大杀器,让你多装n部学习资料,多装n个外语听力练习.除了装东西外,存储卡性能不佳也会影响手机的整体性能以及体验的.本文主要针对Android手机,我是懒人,但我讨厌懒人 ...
- qutIm编译
官网:http://www.qutim.org/ 原文地址:http://wiki.qutim.org/en/building_from_git 依赖: Qt4-dev 4.7:http://qt-p ...
- 前端工程师须知pc电脑端分辨率
PC端 按屏幕宽度大小排序(主流的用橙色标明) 分辨率 比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.14.1寸.15寸; ) ...
- hive集群安装配置
hive 是JAVA写的的一个数据仓库,依赖hadoop.没有安装hadoop的,请参考http://blog.csdn.net/lovemelovemycode/article/details/91 ...
- struts2的初步认识！
struts2的jar包会完成一些工作,让你的数据和显示很好的联系在一起. 开始的时候,主要通过三个点来完成Struts2的工作 1,JAVA类 2,struts.x ...
- ANDROID资源文件【转】
1. 资源包括:文本字符串.图像和图标.音频文件.视频和其他应用程序使用的组件. 2. 在Android工程中,Android资源文件是同Java类文件分开存储的,大多数常见的资源类型存储在XML ...
- md笔记——微信JS接口
微信js接口 隐藏微信中网页右上角按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { Weix ...
- Jade 报错
今天写jade的时候遇到一个问题 Invalid indentation,you can use tabs or spaces but not both问题 经过查证原来是 在jade模板中 同时存在 ...
- HTML5的绘图的支持
一.简单介绍canvas元素 <canvas.../>是HTML5新增的一个元素,该元素用于绘制图形.实际上<canvas../>只是相当于一张画布. 它除了可以指定通用属性外 ...
- android入门——UI(4)
GridView控件实现菜单 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xml ...