原文：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;&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 无刷新分页的更多相关文章

  1. 自己动手用Javascript写一个无刷新分页控件

    .NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...

  2. 在Thinkphp中使用AJAX实现无刷新分页

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...

  3. phpcms无刷新分页

    控制器添加一个函数: 添加一个静态页面ajax_message.html,在页面中添加如下代码: 在要分页的页面(我的是"show"页面)中添加如上图代码: phpcms无刷新分页 ...

  4. MVC无刷新分页（即局部刷新，带搜索，页数选择，排序功能）

    我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的. ...

  5. 扩展GridView实现的一个自定义无刷新分页，排序，支持多种数据源的控件TwfGridView

    最近项目View层越来越趋向于无刷新化,特别是数据展示方面,还要对Linq有很好的支持.在WebFrom模式的开发中,GridView是一个功能很强大,很常用的控件,但是他也不是完美的,没有自带的无刷 ...

  6. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  7. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  8. ASP.NET Ajax简单的无刷新分页

    最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...

  9. 无刷新分页 jquery.pagination.js

     无刷新分页 jquery.pagination.js 采用Jquery无刷新分页插件jquery.pagination.js实现无刷新分页效果 1.插件参数列表 http://www.dtan.so ...

随机推荐

  1. 标准C编程-笔记全集

    C语言的基本概念 编写一个简单的C程序,后缀名保存为c(本次文件名为a.c) gcc:对c程序进行编译和连接:gcc a.c ./a.out:运行程序,输出程序的结果:其中a是c程序的文件名 说明:其 ...

  2. SQLServer2012 和 MariaDB 10.0.3 分页效率的对比

    1. 实验环境      R910服务器, 16G内存 SqlServer 2012   64bit MariaDB 10.0.3   64bit  (InnoDB) 2. 实验表情况 rtlBill ...

  3. poj1565---(数论)skew binary

    /*将数字存储在数组中 #math.h strlen(a)=len sum=0 for(i=0;i<len;i++) sum+=a[i]*(pow(2,len-i)-1)*/ #include ...

  4. nodejs的url模块中的resolve()的用法总结

    var url = require('url'); var a = url.resolve('/one/two/three', 'four') , b = url.resolve('http://ex ...

  5. 开源 免费 java CMS - FreeCMS1.9 简历管理

    项目地址:http://code.google.com/p/freecms/ 简历管理 管理当前管理网站的简历数据. 1. 回复简历 选择须要回复的简历.然后点击"回复". 注意: ...

  6. ThreadPool.QueueUserWorkItem的性能问题

    在WEB开发中,为了降低页面等待时间提高用户体验,我们往往会把一些浪费时间的操作放到新线程中在后台执行. 简单的实现代码就是: //代码一 new Thread(()=>{ //do somet ...

  7. inline函数和一般的函数有什么不同

    1.比如: int g(int x) { return x + x; } int f() { return g(); } 这样f会调用g,然后g返回x + x给f,然后f继续把那个值返回给调用者. 如 ...

  8. .net 资源

    基于.net构架的留言板项目大全源码 http://down.51cto.com/zt/70 ASP.net和C#.net通用权限系统组件功能教程 http://down.51cto.com/zt/1 ...

  9. 锁·——lock关键字详解

    作  者:刘铁猛 日  期:2005-12-25 关键字:lock 多线程 同步 小序 锁者,lock关键字也.市面上的书虽然多,但仔细介绍这个keyword的书太少了.MSDN里有,但所给的代码非常 ...

  10. 创建以及加载模块【nodejs第四篇】

    建立两个文件,文件一createModule.js ,文件二main.js createModule.js的代码,主要用于创建一个模块 /** * Created by Administrator o ...