迎接2012之Ajax分页

来源：互联网发布：买家淘宝淘客怎么设置编辑：程序博客网时间：2024/05/22 09:38

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

二、代码

(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\"onclick=\"Del(" + cc.Data[i].Id + ")\">删除</td></tr>";                        }                        htm += "<tr><td colspan=\"5\" align=\"center\">";                        if (pageno > 1) {                            htm += "<span onclick=\"PageList(" + (1) + ")\">第一页</span>";                            htm += "<span onclick=\"PageList(" + (pageno - 1) + ")\">上一页</span>";                        }                        if (pageno < cc.PageCount) {                            htm += "<span onclick=\"PageList(" + (pageno + 1) + ")\">下一页</span>";                            htm += "<span onclick=\"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>

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