本文實例講述了asp.net+ajax簡單分頁實現(xiàn)方法。分享給大家供大家參考，具體如下：
這里涉及兩個.aspx文件，一個叫Default.aspx,一個叫AjaxOperations.aspx,第一個用來顯示一些測試數(shù)據(jù)，后一個用來對分頁進行處理。js文件夾下面還有一個testJs.js的文件，它就是ajax操作的核心部分。不錯，code is cheap?？创a：
/*testJs.js*/
// 此函數(shù)等價于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }
// 創(chuàng)建 XMLHttpRequest對象，以發(fā)送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總頁數(shù) ,tN總記錄數(shù)
function showPages(cP, tP, tN) {
//處理頁碼大于總頁數(shù)
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 += "nbsp;input name='pgNumber' type='text' id='pgNumber' size='3' onKeyPress='return handleEnterOnPgNumber();'>nbsp;" +
"input name='goto' type='button' id='goto' value='go' onClick='forward()'>";
newCellThree.innerHTML = pageHtml;
}
//構造頁面跳轉的js函數(shù)，函數(shù)中需要判斷輸入的頁號是否是合法的數(shù)值
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) { // 頁數(shù)不能為0或者為負數(shù) (首頁，尾頁)
if (oNum > 0) {
var totalNumber = parseInt($("totalNum").innerText); //總記錄數(shù)
var curPgNumber = parseInt($("cuPgNumber").innerText);
var totalPgNumber = parseInt($("sumPgNumber").innerText); // 總頁數(shù)
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); //總記錄數(shù)
var curPgNumber = parseInt($("cuPgNumber").innerText);
var totalPgNumber = parseInt($("sumPgNumber").innerText); // 總頁數(shù)
//如果當前頁是第一頁，點擊前一頁不用刷新 //如果當前頁是最后一頁，點擊下一頁不用刷新
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 = " 獲取數(shù)據(jù)中，請稍等．．．";
//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分頁效果就實現(xiàn)了。
希望本文所述對大家ajax程序設計有所幫助。
您可能感興趣的文章:- ASP.NET和MSSQL高性能分頁實例代碼
- asp.net分頁功能實現(xiàn)
- ASP.NET無刷新分頁簡單實現(xiàn)
- asp.net實現(xiàn)簡單分頁實例
- asp.net gridview分頁：第一頁 下一頁 1 2 3 4 上一頁 最末頁
- asp.net使用AJAX實現(xiàn)無刷新分頁
- asp.net中的GridView分頁問題
- ASP.NET MVC 5使用X.PagedList.Mvc進行分頁教程(PagedList.Mvc)
- asp.net利用后臺實現(xiàn)直接生成html分頁的方法
- asp.net 使用js分頁實現(xiàn)異步加載數(shù)據(jù)
- asp.net中利用Jquery+Ajax+Json實現(xiàn)無刷新分頁的實例代碼
- Asp.Net實現(xiàn)的通用分頁函數(shù)
