关于Ajax无刷新翻页 - 泪

公告

    接触Ajax有一段时间了，但是还不是很精通！因为项目需要，所以做了一个简单的无刷新翻页的例子。现在贴出来！希望对初学者有帮助，并希望高手能指点一二！

    这里使用了jquery，和顺子哥哥(李华顺的Blog)的jquery.xml.js！

    好，看代码！

    GetData.aspx.cs

using System;
2

using System.Data;
3

using System.Configuration;
4

using System.Collections;
5

using System.Web;
6

using System.Web.Security;
7

using System.Web.UI;
8

using System.Web.UI.WebControls;
9

using System.Web.UI.WebControls.WebParts;
10

using System.Web.UI.HtmlControls;
11

public partial class GetData : BasePage
13

{
//实例化BLL
14

protected web.BLL.tblTest tblTestBLL = new web.BLL.tblTest();
15

protected void Page_Load(object sender, EventArgs e)
16

{
17

if (!Page.IsPostBack)
18

{
19

Int32 PageSize = Int32.Parse(GetQueryString("PageSize"));
20

Int32 PageNumber = Int32.Parse(GetQueryString("PageNo"));
21

String result = null;
//这个地方使用了自己的封装的翻页方法
22

DataSet ds = tblTestBLL.GetList(PageSize, PageNumber, "", out result);
23

//将返回的总记录条数和输出的数据xml输出
24

String OutStr = "<total>" + result + "</total>";
25

WriteXMLResult("<xml>" + OutStr + ds.GetXml() + "</xml>");
26

}
27

}
28

}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

<html xmlns="http://www.w3.org/1999/xhtml" >
6

<head runat="server">
7

<title>翻页</title>
8

var PageSize = 10;
12

var PageNum = 1;
13

var total = 0;
14

var OutPager = "";
15

var AjaxImages = "images/ajax-loader.gif";
17

$(document).ready(function(){
19

$("#showlist").html("<img src=\"" + AjaxImages + "\" alt=\"\" align=\"absmiddle\" /> 读取中

");
20

GetList(PageSize ,PageNum);
21

outpagehtml();
22

});
23

//获得总页数
25

var getTotal = function(){
26

var PageCount = 0;
27

if (total % PageSize == 0)
28

{
29

PageCount = total / PageSize;
30

}
31

else
32

{
33

PageCount = total / PageSize + 1;
34

}
35

return PageCount;
36

}
37

//输出翻页连接
39

var outpagehtml = function(){
40

var Pager = $("#Pager");
41

var outhtml = "";
42

if(PageNum == 1)
44

{
45

outhtml += '首页 | 上一页 ';
46

}else{
47

outhtml += '<a href="javascript:first();">首页</a> | <a href="javascript:previous();">上一页</a> ';
48

}
49

//此处可进行分页标签连接处理
51

if(PageNum >= getTotal())
53

{
54

outhtml += '下一页 | 尾页';
55

}else{
56

outhtml += '<a href="javascript:next();">下一页</a> | <a href="javascript:last();">尾页</a>';
57

}
58

Pager.html(outhtml);
60

}
62

//下一页
64

var next = function(){
65

PageNum = PageNum + 1;
66

GetList(PageSize ,PageNum);
67

}
68

//上一页
69

var previous = function(){
70

PageNum = PageNum - 1;
71

GetList(PageSize ,PageNum);
72

}
73

//第一页
74

var first = function(){
75

PageNum = 1;
76

GetList(PageSize ,PageNum);
77

}
78

//最后一页
79

var last = function(){
80

var PageCount = getTotal();
81

PageNum = PageCount;
82

GetList(PageSize ,PageNum);
83

}
84

//获得列表
87

var GetList = function(el_PageSize ,el_PageNumber)
88

{
89

$.ajax({
90

url:"GetData.aspx?PageSize=" + el_PageSize + "&PageNo=" + el_PageNumber ,
91

type:"get" ,
92

dataType:"xml" ,
93

success:function(xmlDoc){
94

//获得记录总数
95

total = GetNodeValue(xmlDoc.selectSingleNode("//xml/total"));
97

//获得每一条记录
99

var ListCounts = xmlDoc.selectNodes("//xml/NewDataSet/ds");
100

var outHtml = "";
101

for(var i=0;i<ListCounts.length;i++)
102

{
103

var id = GetNodeValue(ListCounts[i].selectSingleNode("id"));
104

outHtml += "<div>" + id + "</div>";
105

}
106

$("#showlist").html(outHtml);
107

outpagehtml();
108

}
109

});
110

}
111

</script>
112

</head>
113

<body>
114

<form id="form1" runat="server">
115

<div id="showlist">
116

117

</div>
118

<div id="Pager">
119

120

</div>
121

</form>
122

</body>
123

</html>
124

主要的思想就是从GetData.aspx读取xml~
不怎么会讲，有问题和我沟通，给我留言！希望各位多多指点！

posted on 2007-11-08 15:11 泪阅读(1366) 评论(1) 收藏举报

刷新页面返回顶部