自己动手用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>
GetProduct.aspx.cs： using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace 开源代码.aspx页面
{
public partial class GetProduct : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bind();
}
}
private void Bind()
{
string pageIndex = Request.QueryString["pageIndex"];
int pageSize = int.Parse(Request.QueryString["pageSize"]);
if (!string.IsNullOrEmpty(pageIndex))
{
int p = int.Parse(pageIndex);
using (SqlConnection conn = new SqlConnection("Data Source=chenxin-pc;Initial Catalog=AdventureWorks;Integrated Security=True"))
{
using (SqlCommand comm = conn.CreateCommand())
{
try
{
comm.CommandText = "with tmp as (select Row_Number() over(order by ProductID) RowIndex,* from Production.Product) select * from tmp where RowIndex between " + ((p - ) * pageSize) + " and " + (p * pageSize);
SqlDataAdapter adapter = new SqlDataAdapter(comm);
DataTable dt = new DataTable();
adapter.Fill(dt);
this.Repeater1.DataSource = dt;
this.Repeater1.DataBind();
}
catch (Exception ex)
{
Response.Write("服务器内部异常!");
}
}
}
}
else
{
Response.Write("请求的页错误!");
}
}
}
}
最后:Page.js代码如下
//用于初始化页面，调用该方法，使得第一次进入页面时加载第一页数据，并且初始化分页控件。
//pageSize:每页要显示几条记录。
//totalRecord:总共有多少条记录。
//clickFunction:点击分页按钮时要执行的函数。
//containers:一个Dom对象,表示要将分页控件呈现在哪一个元素中。
function InitializePageControl(pageSize, totalRecord, clickFunction, container) {
this.pageIndex = 1;
this.pageSize = pageSize;
clickFunction.call(this);
PageControl(1, pageSize, totalRecord, clickFunction, container);
}
//根据参数来创建一个超链接
function createAnchor(params) {
var a = document.createElement("a");
for (var attr in params) {
a[attr] = params[attr];
}
return a;
}
//pageIndex:当前要显示的是第几页。
//pageSize:每页要显示几条记录。
//totalRecord:总共有多少条记录。
//clickFunction:点击分页按钮时要执行的函数。
//containers:一个Dom对象,表示要将分页控件呈现在哪一个元素中。
function PageControl(pageIndex, pageSize, totalRecord, clickFunction, container) {
container.innerHTML = "";
if (totalRecord <= 0) {
return false;
}
var divContainer = document.createElement("div");
divContainer.className = "divContainer";
//函数func用于用户点击每一个分页按钮时，PageControl内部要处理的函数。
var func = function () {
//当前这个this是指被点击的分页按钮中的某个超链接对象。
this.pageSize = pageSize;
clickFunction.call(this);
PageControl(this.pageIndex, pageSize, totalRecord, clickFunction, container);
};
//求出总共多少页
var pageCount = Math.ceil(totalRecord / pageSize);
//上一页的超链接 只有总页数大于2页，并且当前显示的页不是第一页的时候才显示上一页
if (pageCount > 2 && pageIndex != 1) {
var previousPage = createAnchor(
{
"id": "previousPage",
"href": "#",
"className": "a",
"innerHTML": "上一页",
"onclick": func,
"pageIndex": pageIndex - 1
}
);
divContainer.appendChild(previousPage);
}
var params =
{
"href": "#",
"className": "a",
"onclick": func
}
//如果总页数大于8页，则要出现...的形式。
if (pageCount > 8) {
var firstPage = createAnchor({ "href": "#", "className": "a", "innerHTML": 1, "pageIndex": 1, "onclick": func });
var lastPage = createAnchor({ "href": "#", "className": "a", "innerHTML": pageCount, "pageIndex": pageCount, "onclick": func });
if (pageIndex > 4 && pageIndex + 4 <= pageCount) {
divContainer.appendChild(firstPage);
var a = createAnchor({ "innerHTML": "..." });
divContainer.appendChild(a);
for (var i = pageIndex - 2; i <= pageIndex + 2; i++) {
params.className = "a";
params.innerHTML = i.toString();
params.pageIndex = i;
if (i == pageIndex) {
params.className += " current";
}
a = createAnchor(params);
divContainer.appendChild(a);
}
a = createAnchor({ "innerHTML": "..." });
divContainer.appendChild(a);
divContainer.appendChild(lastPage);
}//当前要显示的页数<=4页
else if (pageIndex <= 4) {
for (var i = 1; i <= 6; i++) {
params.className = "a";
params.innerHTML = i.toString();
params.pageIndex = i;
if (i == pageIndex) {
params.className += " current";
}
a = createAnchor(params);
divContainer.appendChild(a);
}
a = createAnchor({ "innerHTML": "..." });
divContainer.appendChild(a);
divContainer.appendChild(lastPage);
}//当前要显示的是最后一页。
else {
divContainer.appendChild(firstPage);
a = createAnchor({ "innerHTML": "...", "className": "a" });
divContainer.appendChild(a);
for (var i = pageCount - 5; i <= pageCount; i++) {
params.className = "a";
params.innerHTML = i.toString();
params.pageIndex = i;
if (i == pageIndex) {
params.className += " current";//不要漏了current前面的空格哦
}
a = createAnchor(params);
divContainer.appendChild(a);
}
}
}//总页数<=8页，那么就直接显示所有的页数
else {
for (var i = 1; i <= pageCount; i++) {
params.className = "a";
params.innerHTML = i.toString();
params.pageIndex = i;
if (i == pageIndex) {
params.className += " current";
}
a = createAnchor(params);
divContainer.appendChild(a);
}
}
//之用总页数大于2页，并且当前显示的页<总页数的时候才显示下一页
if (pageCount >= 2 && pageIndex < pageCount) {
var nextPage = createAnchor(
{
"id": "nextPage",
"href": "#",
"className": "a",
"innerHTML": "下一页",
"onclick": func,
"pageIndex": (pageIndex + 1)
}
);
divContainer.appendChild(nextPage);
}
var span = document.createElement("span");
span.textContent = "转到";
span.className = "span";
divContainer.appendChild(span);
var input = document.createElement("input");
input.type = "text";
input.value = pageIndex.toString();
input.id = "txtPageIndex";
input.className = "input";
divContainer.appendChild(input);
span = document.createElement("span");
span.innerHTML = "页";
span.className = "span";
divContainer.appendChild(span);
var go = document.createElement("input");
go.type = "button";
go.className = "go";
go.value = "Go";
go.onclick = function () {
var txtPageIndex = document.getElementById("txtPageIndex");
try {
//alert("value" in txtPageIndex);
var pageIndex = parseInt(txtPageIndex.value, 10);
if (pageIndex < 1 || pageIndex > pageCount) {
alert("页数的合法范围: 1-" + pageCount);
}
else if (isNaN(pageIndex)) {
alert("页数必须为数字!");
}
else {
//这里面的this是指input,但是因为input这个东西并没有pageIndex属性，所以我们必须给其添加进去
this.pageIndex = pageIndex;
this.pageSize = pageSize;
clickFunction.call(this);
PageControl(pageIndex, pageSize, totalRecord, clickFunction, container);
}
}
catch (error) {
alert("描述:" + error.description + " 详细信息: " + error.stack + error.message);
}
}
divContainer.appendChild(go);
container.appendChild(divContainer);
}
自己动手用Javascript写一个无刷新分页控件的更多相关文章
- 小白写的一个ASP.NET分页控件，仅供娱乐
无聊,第一次写博客,自己动手写了一个分页控件.由于我是新手,有很多地方写得不够好,希望各位大牛多多指正.哈哈哈 /// <summary> /// 分页控件 /// </summar ...
- JavaScript封装一个实用的select控件
最近一直把精力放在项目上面,导致忽略的一些底层的东西.以前就一直觉得原有的select控件很丑,正好周末有时间,试着做了一个简单封装,实现了它的基本功能.我总结了一下,大概分为三个部分: 1.对显示样 ...
- 对自写的Asp.Net分页控件的应用方式(异步无刷新分页)
前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...
- asp.net 分页-自己写分页控件
去年就发表过asp.net 分页-利用后台直接生成html分页 ,那种方法只是单纯的实现了分页,基本不能使用,那时就想写个自己的分页控件,无奈能力有限.最近有点时间了,就自己做出了这个分页控件.我承认 ...
- uinty3d使用ugui封装一个分页控件
我们在显示数据时有的数据比较多,手机内存有限,我们不可能分配很多的控件来显示这些数据,分页是一个不错的选择.比如玩家交易行.我们现在封装一个自己简单的分页控件来显示玩家交易行. 分页控件的原理其实很简 ...
- 用javascript写一个前端等待控件
前端等待控件有啥新奇的?什么jquery啦,第三方控件啦,好多好多,信手拈来. 因为项目使用了bootstrap的原因,不想轻易使用第三方,怕不兼容.自己写一个. 技术点包括动态加载CSS,javas ...
- PHP + JavaScript + Ajax 实现无刷新页面加载效果
数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...
- JavaScript实现页面无刷新让时间走动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 扩展GridView实现的一个自定义无刷新分页，排序，支持多种数据源的控件TwfGridView
最近项目View层越来越趋向于无刷新化,特别是数据展示方面,还要对Linq有很好的支持.在WebFrom模式的开发中,GridView是一个功能很强大,很常用的控件,但是他也不是完美的,没有自带的无刷 ...
随机推荐
- PHP ‘scan’函数拒绝服务漏洞
漏洞名称: PHP ‘scan’函数拒绝服务漏洞 CNNVD编号: CNNVD-201311-464 发布时间: 2013-12-06 更新时间: 2013-12-06 危害等级: 中危 漏洞类型 ...
- 【C++】命令行Hangman #2015年12月15日 00:20:27
增加了可以在构造Hangman对象时通过传入参数设定“最大猜测次数”的功能.少量修改.# 2015年12月15日 00:20:22 https://github.com/shalliestera/ha ...
- Matlab工具箱安装体会
总结有两点: 1.如需添加jar包等附加库,可在待安装工具箱下,新建一个java文件夹,并将jar包等文件存放在里面,然后执行以下操作: 1)Create or open your preferenc ...
- MySQL优化技巧之五（mysql查询性能优化)
对于高性能数据库操作,只靠设计最优的库表结构.建立最好的索引是不够的,还需要合理的设计查询.如果查询写得很糟糕,即使库表结构再合理.索引再合适,也无法实现高性能.查询优化.索引优化.库表结构优化需要齐 ...
- Ruby require 路径问题
require 负责引用一个外部文件,可以省略".rb"字样. 如: require 'foo.bar' 等价于 require 'foo' 在Ruby中,同一目录下的文件, 如 ...
- wuzhicms常见函数方法的整理收集
函数(方法) 含义功能 PHP file_exists() 函数 检查文件或目录是否存在.如果指定的文件或目录存在则返回 true,否则返回 false 五指cms MSG MSG($msg, $go ...
- hibernate4.0+版本和3.0+版本的区别总结
自己总结下hibernate4.1版本中的新特性和hibernate3.3做区别 1.数据库方言设置 <property name=”dialect”>org.hibernate.dial ...
- Centos添加硬盘分区、挂载磁盘
默认一个硬盘,新增硬盘识别为sdb.sdbc一次类推 1.查看磁盘信息 >fdisk -l #新磁盘为/dev/sdb,截图是已经分区完成了. 2.进入分区界面 >fdisk /dev/s ...
- HDOJ-ACM1005(JAVA)
转载声明:原文转自http://www.cnblogs.com/xiezie/p/5502918.html JAVA语言实现: 拿到题目第一反应是简单地实现递归: import java.util.* ...
- nginx 多域名配置 （nginx如何绑定多个域名）
nginx绑定多个域名可又把多个域名规则写一个配置文件里,也可又分别建立多个域名配置文件,我一般为了管理方便,每个域名建一个文件,有些同类域名也可又写在一个总的配置文件里. 一.每个域名一个 ...