本文实例讲述了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" + 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="/UploadFiles/2021-04-02/testJs.js">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程序设计有所帮助。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“asp.net+ajax简单分页实例分析”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。