迎接2012之Ajax分页

一、代码存储过程基于三层架构那篇博文,只需要修改几个页面

二、代码

(1)GetList.ashx

<%@ WebHandler Language="C#" Class="GetList" %>

using System;
using System.Web;

public class GetList : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        int pageno = int.Parse(context.Request.QueryString["pageno"].ToString());
        System.Text.StringBuilder str = new System.Text.StringBuilder();
        ThreeLevelBLL.Users bll = new ThreeLevelBLL.Users();
        int PageCount = 0;
        int RecordCount=0;
        System.Collections.Generic.List<ThreeLevelMODEL.Users> us = bll.UserGetList(5, ref PageCount, pageno, ref RecordCount);
        if (us.Count > 0)
        {
            str.Append("{\"PageCount\":\"" + PageCount + "\",\"RecordCount\":\"" + RecordCount + "\",\"Data\":");
            str.Append("[");
            for (int i = 0; i < us.Count; i++)
            {
                str.Append("{");
                str.Append("\"Id\":\"" + us[i].Id + "\",");
                str.Append("\"UserName\":\"" + us[i].UserName + "\",");
                str.Append("\"PassWord\":\"" + us[i].PassWord + "\",");
                str.Append("\"Sex\":\"" + (us[i].Sex == true ? "男" : "女") + "\"");
                str.Append("}");
                if (i != us.Count - 1)
                {
                    str.Append(",");
                }
            }
            str.Append("]}");
        }
        else
        {
            str.Append("{\"PageCount\":\"" + 0 + "\",\"RecordCount\":\"" + 0 + "\",\"Data\":\"" + 0 + "\"");
        }
        context.Response.Write(str.ToString());
      
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

(2)Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>
    <title>用户列表</title>
    <script type="text/javascript" src="JQueryUi/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="JQueryUi/js/jquery-ui-1.8.16.custom.min.js"></script>
    <link type="text/css" rel="Stylesheet" href="JQueryUi/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Btn_Add").click(function () {
                $("#hidediv").dialog({
                    modal: true,
                    title: "增加会员",
                    resizable: false,
                    bgiframe: true,
                    open: function () { $("#hidediv").load("Add.aspx") }
                });
            })
            $("#code").css("cursor", "pointer");
            $("#code").click(function () {
                $("#code").attr("src", "VerificationCode.ashx?t=" + function () {
                    var dt = new Date();
                    var dts = dt.getYear().toString() + dt.getMonth().toString() + dt.getDay().toString() + dt.getHours().toString() + dt.getMinutes().toString() + dt.getSeconds().toString() + dt.getMilliseconds().toString();
                    return dts;
                } ());
            });
            PageList(1);

        });
        function PageList(pageno) {
            $.ajax({
                type: "get",
                url: "GetList.ashx?pageno=" + pageno,
                dataType: "json",
                success: function (dt) {
                    var cc = eval(dt);
                    if (cc.RecordCount > 0) {
                        var htm = "<table><tr><th>编号</th><th>用户名</th><th>密码</th><th>性别</th><th>操作</th>";
                        for (var i = 0; i < cc.Data.length; i++) {
                            htm += "<tr id=\"" + cc.Data[i].Id + "\"><td>" + cc.Data[i].Id + "</td><td>" + cc.Data[i].UserName + "</td><td>" + cc.Data[i].PassWord + "</td><td>" + cc.Data[i].Sex + "</td><td style=\"cursor:pointer\"οnclick=\"Del(" + cc.Data[i].Id + ")\">删除</td></tr>";
                        }
                        htm += "<tr><td colspan=\"5\" align=\"center\">";
                        if (pageno > 1) {
                            htm += "<span οnclick=\"PageList(" + (1) + ")\">第一页</span>";
                            htm += "<span οnclick=\"PageList(" + (pageno - 1) + ")\">上一页</span>";
                        }
                        if (pageno < cc.PageCount) {
                            htm += "<span οnclick=\"PageList(" + (pageno + 1) + ")\">下一页</span>";
                            htm += "<span οnclick=\"PageList(" + (cc.PageCount) + ")\">最后页</span>";
                        }
                        htm += "共" + cc.PageCount + "页码共" + cc.RecordCount + "条记录 当前第" + pageno + "页</td></tr>";
                        $("#content table").html(htm);
                    }
                },
                beforeSend: function (dt) {
                    alert("正在获取");
                },
                Error: function (dt) {
                    alert(dt);
                }
            });
        }
        function Del(id) {
            $.ajax({
                type: "post",
                url: "Delete.ashx",
                data: "id=" + id + "&time=" + function () {
                    var dt = new Date();
                    var dts = dt.getYear().toString() + dt.getMonth().toString() + dt.getDay().toString() + dt.getHours().toString() + dt.getMinutes().toString() + dt.getSeconds().toString() + dt.getMilliseconds().toString();
                    return dts;
                } (),
                success: function (dt) {
                    alert(dt);
                    $("#" + id).remove();
                },
                Error: function (dt) {
                    alert("出错啦!");
                }
            });
            return false;
        }
    </script>
    <style type="text/css">
        *
        {
            margin:0px;
            padding:0px;
        }
        table:
        {
            border-collapse:collapse;
        }
        table tr th,td
        {
            border-width:1px;
            border-style:solid;
            border-color:Blue;
        }
    </style>
</head>

<body>
    <div>
        <input id="Btn_Add" type="button" value="增加用户" />
    </div>
    <div id="content">
        <table>
            <tr>
                <th>
                    编号
                </th>
                <th>
                    用户名
                </th>
                <th>
                    密码
                </th>
                <th>
                    性别
                </th>
                <th>
                    操作
                </th>
            </tr>
            <tr>
            <td colspan="5">
            共1页 总共0条记录 当前第1页
            </td>
            </tr>
        </table>
    </div>
    <div id="hidediv">
    </div>
</body>
</html>

三、可能会有错误,尚未仔细测试。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值