自己动手用Javascript写一个无刷新分页控件
自己动手用Javascript写一个无刷新分页控件
.NET技术交流群:337901356 ,欢迎您的加入!
对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的人,可能对服务器端(具有runat="server"属性)的控件的回发(PostBack)特性有一定的了解。我们知道,只要 一点击页面中的Asp.net按钮(可能是LinkButton,也可能是Button,还有可能是ImageButton等)都会引起整个页面的刷新, 这样的体验是非常不好的,因为点击按钮后导致的操作是重新给服务器发送一个请求,重新执行一次页面的服务端代码,重新生成html,然后响应生成的页面内 容,发回浏览器端。这样无形中增大了网络浏览,用户等待页面的响应时间增长等。 有时我们点击某个按钮目的只是为了某个区域的数据被更新,而其他的区域的数据不变,这个时候我们就可以使用Ajax技术(Asynchronous Javascript And XML)称为异步Javascript 和 XML. 但是往往我们站点中的数据不止一条,但又要有页面无刷新(其实是局部刷新)的效果,那么分页的时候我们就不能在网上去下载服务端的分页控件(如 AspNetPager)来进行分页,因为服务器端的分页控件会和后台相关联,只能通过Javascript代码来编写一个分页控件来进行分页。 废话不多话说,看分页代码。 为了证明是无刷新分页,这里我们page.html这个静态页面来呈现从数据库中取到的数据。 page.html页面代码如下
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="../分页控件/Page.css" rel="stylesheet" /> <script src="../分页控件/Page.js"></script> <style type="text/css"> .b { color: red; text-align: center; margin-top: 100px; } th { padding: 10px; } .td { border-left: 1px solid #E0E0E0; border-top: 1px solid #E0E0E0; padding: 10px; color: Brown; text-align: center; } .table { border-bottom: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0; width: 80%; } </style> </head> <body> <div style="width:800px;margin:0px auto;border:1px solid Gray;height:1000px;"> <!--用于呈现要显示的数据的div--> <div id="content" style="height:auto;"> <!--<select id="sel"></select>--> </div> <!--用于呈现分页控件的Div--> <div id="pager"> </div>
<script type="text/javascript">
var totalRecord = 0;
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("get", "../ashx文件/GetRecordCount.ashx", true);
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == "200") {
totalRecord = parseInt(xmlHttpRequest.responseText, 10);
InitializePageControl(10, totalRecord, function () {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("get", "../aspx页面/GetProduct.aspx?pageIndex=" + (this.pageIndex) + "&pageSize=" + (this.pageSize), true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == "200") {
var content = document.getElementById("content");
content.innerHTML = "";
content.innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send(null);
}, document.getElementById("pager"));
}
}
xmlHttpRequest.send(null);
</script>
</div> </body> </html> 返回数据的页面:GetProduct.aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetProduct.aspx.cs" Inherits="开源代码.aspx页面.GetProduct" %>
<asp:repeater id="Repeater1" runat="server">
<HeaderTemplate>
<table class="table">
<tr>
<th>编号</th>
<th>姓名</th>
<th>产品编号</th>
<th>颜色</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td class="td"><%#Eval("ProductID") %></td>
<td class="td"><%#Eval("Name") %></td>
<td class="td"><%#Eval("ProductNumber") %></td>
<td class="td"><%#Eval("Color") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:repeater>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetProduct.aspx.cs" Inherits="开源代码.aspx页面.GetProduct" %> <asp:repeater id="Repeater1" runat="server"> <HeaderTemplate> <table class="table"> <tr> <th>编号</th> <th>姓名</th> <th>产品编号</th> <th>颜色</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td class="td"><%#Eval("ProductID") %></td> <td class="td"><%#Eval("Name") %></td> <td class="td"><%#Eval("ProductNumber") %></td> <td class="td"><%#Eval("Color") %></td> </tr> </ItemTemplate> <FooterTemplate>