自己动手用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>
