asp.net+ajax簡(jiǎn)單分頁(yè)實(shí)例分析
本文實(shí)例講述了asp.net+ajax簡(jiǎn)單分頁(yè)實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
這里涉及兩個(gè).aspx文件,一個(gè)叫Default.aspx,一個(gè)叫AjaxOperations.aspx,第一個(gè)用來(lái)顯示一些測(cè)試數(shù)據(jù),后一個(gè)用來(lái)對(duì)分頁(yè)進(jìn)行處理。js文件夾下面還有一個(gè)testJs.js的文件,它就是ajax操作的核心部分。不錯(cuò),code is cheap。看代碼:
/*testJs.js*/ // 此函數(shù)等價(jià)于document.getElementById /document.all function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } } // 創(chuàng)建 XMLHttpRequest對(duì)象,以發(fā)送ajax請(qǐng)求 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目前頁(yè)碼, tP總頁(yè)數(shù) ,tN總記錄數(shù) function showPages(cP, tP, tN) { //處理頁(yè)碼大于總頁(yè)數(shù) if (cP >= tP) { cP = tP; } //處理頁(yè)碼小于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>項(xiàng) 第<span id='cuPgNumber' style='color:red'>" + cP + "</span>/<span id='sumPgNumber' >" + tP + "</span>頁(yè)"; var pageHtml = " <a href='#' onclick='gotoPage(1)'>首頁(yè)</a>"; pageHtml += "<a id='prevPg' href='#' onclick='goToNextPrev(-1)'> 上頁(yè) </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)'> 下頁(yè)</a>"; pageHtml += "<a href='#' onclick='gotoPage(" + tP + ")'> 尾頁(yè)</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; } //構(gòu)造頁(yè)面跳轉(zhuǎn)的js函數(shù),函數(shù)中需要判斷輸入的頁(yè)號(hào)是否是合法的數(shù)值 function forward() { if (!(/^([-]){0,1}([0-9]){1,}$/.test($("pgNumber").value))) { //輸入的值不合法 alert("請(qǐng)輸入合法的頁(yè)號(hào)!"); $("pgNumber").focus(); $("pgNumber").select(); } else gotoPage($("pgNumber").value); } //處理在跳轉(zhuǎn)頁(yè)面上按下回車的情況 function handleEnterOnPgNumber() { if (event.keyCode == 13) { forward(); return false; } return true; } function gotoPage(oNum) { // 頁(yè)數(shù)不能為0或者為負(fù)數(shù) (首頁(yè),尾頁(yè)) if (oNum > 0) { var totalNumber = parseInt($("totalNum").innerText); //總記錄數(shù) var curPgNumber = parseInt($("cuPgNumber").innerText); var totalPgNumber = parseInt($("sumPgNumber").innerText); // 總頁(yè)數(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("請(qǐng)輸入合法的頁(yè)號(hào)!"); $("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); // 總頁(yè)數(shù) //如果當(dāng)前頁(yè)是第一頁(yè),點(diǎn)擊前一頁(yè)不用刷新 //如果當(dāng)前頁(yè)是最后一頁(yè),點(diǎn)擊下一頁(yè)不用刷新 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) { // 處理請(qǐng)求,更新內(nèi)容 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ù)中,請(qǐng)稍等..."; //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頁(yè)</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:
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"] + "頁(yè)"); } } } }
Ok了,在我的機(jī)器上(vs2008)測(cè)試通過(guò),簡(jiǎn)單的ajax分頁(yè)效果就實(shí)現(xiàn)了。
希望本文所述對(duì)大家ajax程序設(shè)計(jì)有所幫助。
- ASP.NET和MSSQL高性能分頁(yè)實(shí)例代碼
- asp.net分頁(yè)功能實(shí)現(xiàn)
- ASP.NET無(wú)刷新分頁(yè)簡(jiǎn)單實(shí)現(xiàn)
- asp.net實(shí)現(xiàn)簡(jiǎn)單分頁(yè)實(shí)例
- asp.net gridview分頁(yè):第一頁(yè) 下一頁(yè) 1 2 3 4 上一頁(yè) 最末頁(yè)
- asp.net使用AJAX實(shí)現(xiàn)無(wú)刷新分頁(yè)
- asp.net中的GridView分頁(yè)問(wèn)題
- ASP.NET MVC 5使用X.PagedList.Mvc進(jìn)行分頁(yè)教程(PagedList.Mvc)
- asp.net利用后臺(tái)實(shí)現(xiàn)直接生成html分頁(yè)的方法
- asp.net 使用js分頁(yè)實(shí)現(xiàn)異步加載數(shù)據(jù)
- asp.net中利用Jquery+Ajax+Json實(shí)現(xiàn)無(wú)刷新分頁(yè)的實(shí)例代碼
- Asp.Net實(shí)現(xiàn)的通用分頁(yè)函數(shù)
相關(guān)文章
Ajax獲取到數(shù)據(jù)放入echarts里不顯示的原因分析及解決辦法
在做一個(gè)需要用到echarts地圖的項(xiàng)目的時(shí)候,成功通過(guò)ajax獲取到了后臺(tái)提供的數(shù)據(jù),并生成了想要的JSON串。但是,放到echarts option.series[0].data里,獲取不到數(shù)據(jù)。在生成的地圖上無(wú)法看到你從后臺(tái)獲取到的值,下面小編給大家分享我的解決辦法,需要的朋友參考下2016-01-01ajax返回的json內(nèi)容進(jìn)行排序使用sort()方法實(shí)現(xiàn)
關(guān)于ajax返回的json內(nèi)容進(jìn)行排序,主要使用sort()對(duì)數(shù)組的元素進(jìn)行排序,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07Ajax的jsonp方式跨域獲取數(shù)據(jù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Ajax的jsonp方式跨域獲取數(shù)據(jù)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05ajax獲得json對(duì)象數(shù)組 循環(huán)輸出數(shù)據(jù)的方法
今天小編就為大家分享一篇ajax獲得json對(duì)象數(shù)組 循環(huán)輸出數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08利用Ajax實(shí)現(xiàn)在腳本里傳值實(shí)例介紹
Ajax實(shí)現(xiàn)在腳本里傳值可以解決實(shí)際上的一些問(wèn)題,本文實(shí)現(xiàn)了一下,感興趣的朋友可以參考下,希望可以幫助到你2013-04-04使用加載圖片解決在Ajax數(shù)據(jù)加載中頁(yè)面出現(xiàn)短暫空白的問(wèn)題(推薦)
在項(xiàng)目中用ajax異步獲取數(shù)據(jù)后有時(shí)會(huì)因?yàn)閿?shù)據(jù)問(wèn)題或者網(wǎng)絡(luò)問(wèn)題,頁(yè)面一直顯示空白,現(xiàn)在用加載圖片來(lái)過(guò)渡這種狀態(tài),具體實(shí)例代碼通過(guò)本文一起學(xué)習(xí)吧2016-12-12ajax實(shí)現(xiàn)點(diǎn)擊不同的鏈接讓返回的內(nèi)容顯示在特定div里
過(guò)ajax實(shí)現(xiàn)在一個(gè)web頁(yè)面點(diǎn)擊不同的鏈接,然后將返回的結(jié)果顯示在該頁(yè)面固定的div里2014-06-06Ajax請(qǐng)求二進(jìn)制流進(jìn)行處理(ajax異步下載文件)的簡(jiǎn)單方法
最近做項(xiàng)目遇到這樣的需求:管理后臺(tái)需要隨時(shí)下載數(shù)據(jù)報(bào)表,數(shù)據(jù)要實(shí)時(shí)生成后轉(zhuǎn)換為excel下載。怎么解決這個(gè)問(wèn)題呢?下面小編給大家分享Ajax請(qǐng)求二進(jìn)制流進(jìn)行處理(ajax異步下載文件)的簡(jiǎn)單方法,一起看看吧2017-09-09Ajax提交參數(shù)的值中帶有html標(biāo)簽不能提交成功的解決辦法(ASP.NET)
這篇文章主要介紹了Ajax提交參數(shù)的值中帶有html標(biāo)簽不能提交成功的解決辦法(ASP.NET),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2016-12-12