Using the above method can really achieve Ajax paging effect, but I always feel not concise enough to study the afternoon, finally a little something O_o
first create the foreground page myajaxpager.aspx
Copy Code code 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 ">
<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>
<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;" > Number </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>
The screen is very simple, is a row of index address, when clicked on the link will be Ajax way to bind the data to the bottom of the repeater.
The main feature is implemented on the Ajaxprocess.aspx page that handles Ajax requests , let's take a look.
Current 1/2 page
12 Next read the full text
