asp.net+ajax简单分页实例分析

本文实例讲述了asp.net+ajax简单分页实现方法。分享给大家供大家参考,具体如下:

这里涉及两个.aspx文件,一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来显示一些测试数据,后一个用来对分页进行处理。js文件夹下面还有一个testJs.js的文件,它就是ajax操作的核心部分。不错,code is cheap。看代码:

/*testJs.js*/
// 此函数等价于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }
// 创建 XMLHttpRequest对象,以发送ajax请求
function createXMLHTTP() {
 var xmlHttp = false;
 var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
       "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
       "Microsoft.XMLHTTP"];
 for (var i = 0; i < arrSignatures.length; i++) {
  try {
   xmlHttp = new ActiveXObject(arrSignatures[i]);
   return xmlHttp;
  }
  catch (oError) {
   xmlHttp = false; //ignore
  }
 }
 // throw new Error("MSXML is not installed on your system.");
 if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
 }
 return xmlHttp;
}
//window.onload = showPages(1, 10, 100);
//cP目前页码, tP总页数 ,tN总记录数
function showPages(cP, tP, tN) {
 //处理页码大于总页数
 if (cP >= tP) {
  cP = tP;
 }
 //处理页码小于1
 if (cP < 1) {
  cP = 1;
 }
 var trPg = $("trPager");
 var newCellOne = trPg.insertCell(0);
 newCellOne.width = "20%";
 var newCellTwo = trPg.insertCell(1);
 newCellTwo.width = "15%";
 newCellTwo.id = "pgSummary";
 var newCellThree = trPg.insertCell(2);
 newCellThree.width = "45%";
 newCellThree.id = "pgNumContext";
 var newCellFour = trPg.insertCell(3)
 newCellFour.width = "20%";
 newCellTwo.innerHTML = "共<span id='totalNum'>" + tN + "</span>项 第<span id='cuPgNumber' style='color:red'>" + cP + "</span>/<span id='sumPgNumber' >" + tP + "</span>页";
 var pageHtml = " <a href='#' onclick='gotoPage(1)'>首页</a>";
 pageHtml += "<a id='prevPg' href='#' onclick='goToNextPrev(-1)'> 上页 </a>";
 for (var i = 1; i < tP + 1; i++) {
  var numColor = "";
  if (i == 1) numColor = "red";
  pageHtml += "<a id='numPg" + i + "' style='color:" + numColor + "' href='#' onclick='gotoPage(" + i + ")'>" + i + " </a>";
 }
 pageHtml += "<a id='nextPg' href='#' onclick='goToNextPrev(1)'> 下页</a>";
 pageHtml += "<a href='#' onclick='gotoPage(" + tP + ")'> 尾页</a>";
 pageHtml += " <input name='pgNumber' type='text' id='pgNumber' size='3' onKeyPress='return handleEnterOnPgNumber();'> " +
   "<input name='goto' type='button' id='goto' value='go' onClick='forward()'>";
 newCellThree.innerHTML = pageHtml;
}
//构造页面跳转的js函数,函数中需要判断输入的页号是否是合法的数值
function forward() {
 if (!(/^([-]){0,1}([0-9]){1,}$/.test($("pgNumber").value))) {
  //输入的值不合法
  alert("请输入合法的页号!");
  $("pgNumber").focus();
  $("pgNumber").select();
 }
 else
  gotoPage($("pgNumber").value);
}
//处理在跳转页面上按下回车的情况
function handleEnterOnPgNumber() {
 if (event.keyCode == 13) {
  forward();
  return false;
 }
 return true;
}
function gotoPage(oNum) { // 页数不能为0或者为负数 (首页,尾页)
 if (oNum > 0) {
  var totalNumber = parseInt($("totalNum").innerText); //总记录数
  var curPgNumber = parseInt($("cuPgNumber").innerText);
  var totalPgNumber = parseInt($("sumPgNumber").innerText); // 总页数
  if (parseInt(oNum) <= totalPgNumber) {
   chgPages(oNum, totalPgNumber, totalNumber);
   for (var k = 1; k < totalPgNumber + 1; k++) {
    $("numPg" + k).style.color = "";
   }
   $("numPg" + oNum).style.color = "red";
   getPagerInfo(oNum);
  }
  else {
   alert("请输入合法的页号!");
   $("pgNumber").focus();
   $("pgNumber").select();
   return;
  }
 }
}
function goToNextPrev(oNum) {
 var addNum = parseInt(oNum);
 var totalNumber = parseInt($("totalNum").innerText); //总记录数
 var curPgNumber = parseInt($("cuPgNumber").innerText);
 var totalPgNumber = parseInt($("sumPgNumber").innerText); // 总页数
 //如果当前页是第一页,点击前一页不用刷新 //如果当前页是最后一页,点击下一页不用刷新
 if ((curPgNumber + addNum) > 0 && (curPgNumber + addNum) <= totalPgNumber) {
  chgPages(parseInt(curPgNumber + addNum), totalPgNumber, totalNumber);
  for (var k = 1; k < totalPgNumber + 1; k++) {
   $("numPg" + k).style.color = "";
  }
  $("numPg" + parseInt(curPgNumber + addNum)).style.color = "red";
  getPagerInfo(parseInt(curPgNumber + addNum));
 }
}
function chgPages(cuPg, toPg, tNum) {
 // $("totalNum").innerHTML = tNum;
 $("cuPgNumber").innerHTML = cuPg;
 //$("sumPgNumber").innerHTML = toPg;
}
function getPagerInfo(oNum) { // 处理请求,更新内容
 var xmlReq = createXMLHTTP();
 xmlReq.open("post", "/AjaxOperations.aspx?pgNumber=" + oNum, true);
 xmlReq.onreadystatechange = function() {
  if (xmlReq.readyState == 4) {
   if (xmlReq.status == 200) {
    //xmlReq.responseText为输出的那段字符串
    $("tbTest").innerHTML = xmlReq.responseText;
   }
   else {
    $("tbTest").innerHTML = "  获取数据中,请稍等...";
    //alert("Connect the server failed!");
   }
  }
 }
 xmlReq.send(null);
}

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebTest2008.Default" %>
<!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">
 <script src="js/testJs.js" type="text/javascript"></script>
 <style type="text/css">
 A:link
 {
 color: #003399;
 text-decoration: none;
 }
 A:visited
 {
 color: #003366;
 text-decoration: none;
 }
 A:hover
 {
 color: #ff0000;
 text-decoration: underline;
 }
 A:active
 {
 color: #00ff00;
 text-decoration: none;
 }
 </style>
 <title></title>
</head>
<body onload="showPages(1, 10, 100)">
 <form id="form1" runat="server">
 <div>
 <div style="text-align: center" id="tbTest">
 第1页</div>
 <table cellspacing="0" style="width: 100%; height: 30px" border="0" align="center">
 <tr id="trPager">
 </tr>
 </table>
 </div>
 </form>
</body>
</html>

Default.aspx.cs:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest2008
{
 public partial class Default : System.Web.UI.Page
 {
  protected void Page_Load(object sender, EventArgs e)
  {
  }
 }
}

AjaxOperations.aspx:

代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxOperations.aspx.cs" Inherits="WebTest2008.AjaxOperations" %>

AjaxOperations.aspx.cs:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest2008
{
 public partial class AjaxOperations : System.Web.UI.Page
 {
  protected void Page_Load(object sender, EventArgs e)
  {
   if (!string.IsNullOrEmpty(Request["pgNumber"]))
   {
    //int pgNum = Convert.ToInt32(Request["pgNumber"]);
    Response.Write("第" + Request["pgNumber"] + "页");
   }
  }
 }
}

Ok了,在我的机器上(vs2008)测试通过,简单的ajax分页效果就实现了。

希望本文所述对大家ajax程序设计有所帮助。

(0)

相关推荐

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • asp.net 使用js分页实现异步加载数据

    1.准备工作 引入"jquery-1.8.3.min.js",AjaxPro.2.dll":用于前台js调用后台方法. 2.Web.config的配置 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <configuration> <connectionStrings> <clear/> <!-- 数据库链接 --> <

  • asp.net实现简单分页实例

    本文实例讲述了asp.net实现简单分页的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: /// <summary> /// 分页内容 /// </summary> /// <param name="size">页面大小</param> /// <param name="count">页面数量</param> /// <param name="curren

  • asp.net使用AJAX实现无刷新分页

    查询功能是开发中最重要的一个功能,大量数据的显示,我们用的最多的就是分页. 在ASP.NET 中有很多数据展现的控件,比如Repeater.GridView,用的最多的GridView,它同时也自带了分页的功能.但是我们知道用GridView来显示数据,如果没有禁用ViewState,页面的大小会是非常的大的.而且平时我们点击首页,下一页,上一页,尾页这些功能都是会引起页面回发的,也就是需要完全跟服务器进行交互,来回响应的时间,传输的数据量都是很大的. AJAX的分页可以很好的解决这些问题. 数

  • Asp.Net实现的通用分页函数

    本文实例讲述了Asp.Net实现的通用分页函数.分享给大家供大家参考,具体如下: 功能: 1.每页设置显示9页,超过9页,点5页后的+1页显示(可以随便修改) 2.CSS样式自己可以设置 3.无任何咋代码产生,利于搜索引擎优化 分页程序 objPDS = new PagedDataSource(); objPDS.DataSource = dtTable.DefaultView;//绑定数据源 objPDS.AllowPaging = true; objPDS.PageSize =10;//分页

  • ASP.NET和MSSQL高性能分页实例代码

    首先是存储过程,只取出我需要的那段数据,如果页数超过数据总数,自动返回最后一页的纪录: set ANSI_NULLS ON set QUOTED_IDENTIFIER ON GO -- ============================================= -- Author: Clear -- Description: 高性能分页 -- http://www.cnblogs.com/roucheng/ -- =================================

  • asp.net中的GridView分页问题

    本文实例讲述了asp.net中的GridView分页问题.分享给大家供大家参考.具体分析如下: 在ASP.NET中,经常会使用到GridView的分页,一般情况下,若使用Visual Studio自带的数据源控件,不会出现什么问题. 但是如果自己用代码设置GridView的数据源,GridView中第一页显示正常,这时如果点击第二页,则经常会出现如下错误 提示:GridView"GridView_test"激发了未处理的事件"PageIndexChanging".

  • asp.net gridview分页:第一页 下一页 1 2 3 4 上一页 最末页

    效果图: 功能简介:可使用上下键选中行,选中后点击修改,textbox获得gridview中的代码的数据.对你有帮助的话,请记得要点击"好文要顶"哦!!!不懂的,请留言.废话不多说了,贴码如下: <head runat="server"> <title>GridView分頁</title> <script type="text/javascript"> var currentRowId = 0; v

  • ASP.NET无刷新分页简单实现

    下面就是和大家分享的实现无刷新分页功能的全部步骤,欢迎学习. 1.新建一个分页存储过程: CREATE procedure [dbo].[P_Pager] (@PageNumber int, @PageSize int) as declare @sql nvarchar(4000) set @sql = 'select top ' + Convert(varchar, @PageSize) + ' * from T_Test where [type]=1 and id not in (selec

  • ASP.NET MVC 5使用X.PagedList.Mvc进行分页教程(PagedList.Mvc)

    ASP.NET MVC中进行分页的方式有多种,但在NuGet上使用最广泛的就是用PagedList.X.PagedList.Mvc进行分页.(原名为:PagedList.Mvc,但是2014年开始,作者将项目名称改名字为"X.PagedList.Mvc"),用这个插件的话会非常便利,大家可以试试,接下来将给大家讲下如何安装这个NuGet插件. ASP.NET MVC 5使用X.PagedList.Mvc进行分页教程(原名为PagedList.Mvc) 1.工具--NuGet 程序包管理

  • asp.net分页功能实现

    说一下实现分页的思路 这里的分页用到了一个组件 AspNetPage.dll,这个组件大家可以到网上去下载,我这里就不提供了 添加最近到工具箱中这样我们就可以像其他控件一样拖拽使用了 如图DataPage是在工具箱中的,至于怎么添加你们百度吧 拖拽到页面中如图 这个是我加完样式后显示的效果,怎么样是不是你们想要的了,如果不是你们还可以修改样式样式稍候奉上 先来看看要怎么使用 <webdiyer:AspNetPager ID="AspNetPager1" runat="s

  • asp.net利用后台实现直接生成html分页的方法

    本文实例讲述了asp.net利用后台实现直接生成html分页的方法,是一个比较实用的功能.分享给大家供大家参考之用.具体方法如下: 1.建立存储过程: ALTER procedure [dbo].[p_news_query] @Page int as begin select top 5 new_id,new_title,new_url,new_content_text,create_time,user_name from (select *,ROW_NUMBER() over(order by

随机推荐