zoukankan      html  css  js  c++  java

  • Ajax分页功能的无框架实现方法

      最近想做一个Ajax分页功能，网上一搜几乎全是基于某某框架的Ajax分页，要么需给页面加上< scriptManager >< /scriptManager>，要么需引入某dll，要么需使用类似于jQuery的框架。使用如上方法确实可以实现Ajax分页效果，但我总觉得不够简洁，这里写一些我的简单总结。

      开始进入Ajax分页功能的无框架实现方法的正题。

      首先创建前台页面MyAjaxPager.aspx

      1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyAjaxPager.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.MyAjaxPager" %> 
      2.  
      3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      4.  
      5. <html xmlns="http://www.w3.org/1999/xhtml" > 
      6. <head runat="server"> 
      7.     <title></title> 
      8.     <style  type="text/css"> 
      9.     .a{}{ height:20px; line-height:20px; border-bottom:1px solid #d8dfea; clear:both;}  
      10.     .b{}{ float:left; 30px;}  
      11.     .c{}{ float:left; 500px;}  
      12.     </style> 
      13.     <script type="text/javascript" src="http://www.cnblogs.com/JS/AjaxFunction.js"></script> 
      14.     <script type="text/javascript"> 
      15.         var xmlHttp;  
      16.           
      17.         function getData(pIndex) {  
      18.             xmlHttp = GetXmlRequest();  
      19.             xmlHttp.onreadystatechange = ShowRepeaterData;  
      20.             xmlHttp.open("GET", "AjaxProcess.aspx?index=" + pIndex, true);  
      21.             xmlHttp.send(null);  
      22.         }  
      23.  
      24.         function ShowRepeaterData() {  
      25.             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {  
      26.                 var gridData = xmlHttp.responseText;  
      27.                 var grid = document.getElementById("grid");  
      28.                 grid.innerHTML = gridData;  
      29.             }  
      30.         }  
      31.     </script> 
      32. </head> 
      33. <body> 
      34.     <form id="form1" runat="server"> 
      35.     <div> 
      36.             <div id="page"> 
      37.         <p align="left"> 
      38.             <a href="javascript:getData(1);">1</a> 
      39.             <a href="javascript:getData(2);">2</a> 
      40.             <a href="javascript:getData(3);">3</a> 
      41.             <a href="javascript:getData(4);">4</a> 
      42.             <a href="javascript:getData(5);">5</a> 
      43.             <a href="javascript:getData(50);">50</a> 
      44.             <a href="javascript:getData(500);">500</a> 
      45.             <a href="javascript:getData(5000);">5000</a> 
      46.             <a href="javascript:getData(50000);">50000</a> 
      47.             <a href="javascript:getData(99999);">99999</a> 
      48.         </p> 
      49.         <div id="grid"> 
      50.             <asp:Repeater ID="rptGrid" runat="server"> 
      51.                 <HeaderTemplate> 
      52.                     <table> 
      53.                         <tr> 
      54.                             <th style="border:solid 1px red;">编号</th> 
      55.                             <th style="border:solid 1px red;">姓名</th> 
      56.                         </tr> 
      57.                 </HeaderTemplate> 
      58.                 <ItemTemplate> 
      59.                     <tr> 
      60.                         <td style="border:solid 1px red;"><%# Eval("Id") %></td> 
      61.                         <td style="border:solid 1px red;"><%# Eval("Name") %></td> 
      62.                     </tr> 
      63.                 </ItemTemplate> 
      64.                 <FooterTemplate> 
      65.                     </table> 
      66.                 </FooterTemplate> 
      67.             </asp:Repeater> 
      68.         </div> 
      69.     </div> 
      70.     </div> 
      71.     </form> 
      72. </body> 
      73. </html> 

      Ajax分页功能的无框架实现的画面很简单，就是一排index地址，当点击链接后会以ajax的方式将数据绑定到下边的repeater。

      实现画面498)this.style.width=498;" height=383>

      主要功能是在处理Ajax请求的AjaxProcess.aspx页面实现的，我们来看看。

      1. AjaxProcess.aspx  
      2. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxProcess.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.AjaxProcess" %> 
      3. <asp:Repeater ID="rptGrid" runat="server"> 
      4.     <HeaderTemplate> 
      5.         <table> 
      6.             <tr> 
      7.                 <th style="border:solid 1px red;">编号</th> 
      8.                 <th style="border:solid 1px red;">姓名</th> 
      9.             </tr> 
      10.     </HeaderTemplate> 
      11.     <ItemTemplate> 
      12.         <tr> 
      13.             <td style="border:solid 1px red;"><%# Eval("Id") %></td> 
      14.             <td style="border:solid 1px red;"><%# Eval("Name") %></td> 
      15.         </tr> 
      16.     </ItemTemplate> 
      17.     <FooterTemplate> 
      18.         </table> 
      19.     </FooterTemplate> 
      20. </asp:Repeater>   

      注意，这个Ajax处理页面的aspx部分并不像往常那样是光秃秃的，只有<% %>内的信息，它的下面多了一个repeater控件，细心的朋友会发现，这个repeater控件和主页面的repeater控件一摸一样。就是利用这个repeater控件来生成返回的html内容的，具体怎么做，请看代码：

      1. AjaxProcess.aspx.cs  
      2. using System;  
      3. using System.Collections.Generic;  
      4. using System.Web;  
      5. using System.Web.UI;  
      6. using System.Web.UI.WebControls;  
      7. using System.Text;  
      8. using System.IO;  
      9. namespace AjaxDemo.AjaxPager.MyAjaxPager  
      10. {  
      11.     public class Item  
      12.     {  
      13.         public string Id  
      14.         {  
      15.             get;  
      16.             set;  
      17.         }  
      18.  
      19.         public string Name  
      20.         {  
      21.             get;  
      22.             set;  
      23.         }  
      24.     }  
      25.  
      26.     public partial class AjaxProcess : System.Web.UI.Page  
      27.     {  
      28.         private int PageSize  
      29.         {  
      30.             get { return 10; }  
      31.         }  
      32.  
      33.         private List<Item> GenerateData()  
      34.         {  
      35.             List<Item> lstItems = new List<Item>();  
      36.             for (int i = 1; i <= 1000000; i++)  
      37.             {  
      38.                 Item it = new Item();  
      39.  
      40.                 it.Id = i.ToString();  
      41.                 it.Name = "zs" + i;  
      42.  
      43.                 lstItems.Add(it);  
      44.             }  
      45.  
      46.             return lstItems;  
      47.         }  
      48.  
      49.         private List<Item> GetData(int index)  
      50.         {  
      51.             List<Item> lstItem = GenerateData();  
      52.             List<Item> bdItem = new List<Item>();  
      53.  
      54.             int begIndex = (index - 1) * PageSize;  
      55.             int endIndex = index * PageSize;  
      56.  
      57.             for (int i = begIndex; i < endIndex; i++)  
      58.             {  
      59.                 bdItem.Add(lstItem[i]);  
      60.             }  
      61.  
      62.             return bdItem;  
      63.         }  
      64.  
      65.         private string GetHtml(Control control)  
      66.         {  
      67.             StringBuilder sb = new StringBuilder();  
      68.             StringWriter writer = new StringWriter(sb);  
      69.             HtmlTextWriter writer2 = new HtmlTextWriter(writer);  
      70.             control.RenderControl(writer2);  
      71.             return sb.ToString();  
      72.         }  
      73.  
      74.         protected void Page_Load(object sender, EventArgs e)  
      75.         {  
      76.             int index = 0;  
      77.             if (int.TryParse(Request.QueryString["index"], out index))  
      78.             {  
      79.                 //获取到index再进行操作  
      80.                 this.rptGrid.DataSource = this.GetData(index);  
      81.                 this.rptGrid.DataBind();  
      82.  
      83.                 Response.Clear();  
      84.                 string html = this.GetHtml(rptGrid);  
      85.                 Response.Write(html);  
      86.                 Response.End();  
      87.             }  
      88.         }  
      89.     }  
      90. } 

      代码相当简单，GenerateData()方法用来生成一个DataSource，GetData(int index)方法用来读取分页信息。在Page_Load事件中，会首先获取请求字符串中的index(页码)，然后利用index取得当前页的信息并将它绑定到repeater控件上，然后利用GetHtml()方法来获取绑定数据后的repeater控件的html内容，将它返回。

      Ok，在主页面的js中。

      1. var gridData = xmlHttp.responseText;  
      2. var grid = document.getElementById("grid");  
      3. grid.innerHTML = gridData; 

      我们获取返回的这段html，并将它的内容输出到主页面的制定div中，到此就成功完成了一次分页请求。

      这是一个简单的demo，如果有需要，还可以加一些分页等待过程中的动画什么的，这里就不详述了。

      以上Ajax分页功能的内容希望可以帮助到有需要的朋友。
  • 相关阅读:
    小波变换教程(十五)
    小波变换教程(十四)
    小波变换教程（十三）
    小波变换教程（十二）
    小波变换教程(十一)
    【转】小波变换教程（十）
    利用Python进行数据分析学习记录（一）
    【转】小波变换教程（九）
    小波变换教程(八)
    【转】小波变换教程(七)
  • 原文地址：https://www.cnblogs.com/liufei88866/p/1914436.html
Copyright © 2011-2022 走看看