ajax分页 asp.net分页,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 = "共" + tN + "项 第" + cP + "/" + tP + "页";

var pageHtml = " 首页";

pageHtml += " 上页 ";

for (var i = 1; i < tP + 1; i++) {

var numColor = "";

if (i == 1) numColor = "red";

pageHtml += "" + i + " ";

}

pageHtml += " 下页";

pageHtml += " 尾页";

pageHtml += "  " +

"";

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：

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;

}

第1页

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：

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程序设计有所帮助。