The above method can indeed achieve the Ajax paging effect, but I always feel that it is not concise. After studying it for one afternoon, I finally made some things out of O_o.
Create MyAjaxPager. aspx
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "MyAjaxPager. aspx. cs" Inherits = "AjaxDemo. AjaxPager. MyAjaxPager. MyAjaxPager" %>
<! 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 type = "text/css">
. A {}{ height: 20px; line-height: 20px; border-bottom: 1px solid # d8dfea; clear: both ;}
. B {}{ float: left; width: 30px ;}
. C {}{ float: left; width: 500px ;}
</Style>
<Script type = "text/javascript" src = "http://www.cnblogs.com/JS/AjaxFunction.js"> </script>
<Script type = "text/javascript">
Var xmlHttp;
Function getData (pIndex ){
XmlHttp = GetXmlRequest ();
XmlHttp. onreadystatechange = ShowRepeaterData;
XmlHttp. open ("GET", "AjaxProcess. aspx? Index = "+ pIndex, true );
XmlHttp. send (null );
}
Function ShowRepeaterData (){
If (xmlHttp. readyState = 4 & xmlHttp. status = 200 ){
Var gridData = xmlHttp. responseText;
Var grid = document. getElementById ("grid ");
Grid. innerHTML = gridData;
}
}
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Div id = "page">
<P align = "left">
<A href = "javascript: getData (1);"> 1 </a>
<A href = "javascript: getData (2);"> 2 </a>
<A href = "javascript: getData (3);"> 3 </a>
<A href = "javascript: getData (4);"> 4 </a>
<A href = "javascript: getData (5);"> 5 </a>
<A href = "javascript: getData (50);"> 50 </a>
<A href = "javascript: getData (500);"> 500 </a>
<A href = "javascript: getData (5000);"> 5000 </a>
<A href = "javascript: getData (50000);"> 50000 </a>
<A href = "javascript: getData (99999);"> 99999 </a>
</P>
<Div id = "grid">
<Asp: Repeater ID = "rptGrid" runat = "server">
<HeaderTemplate>
<Table>
<Tr>
<Th style = "border: solid 1px red;"> NO. </th>
<Th style = "border: solid 1px red;"> name </th>
</Tr>
</HeaderTemplate>
<ItemTemplate>
<Tr>
<Td style = "border: solid 1px red;"> <% # Eval ("Id") %> </td>
<Td style = "border: solid 1px red;"> <% # Eval ("Name") %> </td>
</Tr>
</ItemTemplate>
<FooterTemplate>
</Table>
</FooterTemplate>
</Asp: Repeater>
</Div>
</Div>
</Div>
</Form>
</Body>
</Html>
The screen is simple, that is, a row of index addresses. After clicking the link, the data will be bound to the repeater below in ajax mode.
The main function is to process Ajax requests.AjaxProcess. aspxPage implementation, let's take a look.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
