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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
/*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);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<%@ 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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)
  {
  }
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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"] + "页");
   }
  }
 }
}