asp.net中Ajax分页实例

最新推荐文章于 2021-08-06 13:02:03 发布
H_Gragon
最新推荐文章于 2021-08-06 13:02:03 发布
阅读量795
点赞数
本文链接：https://blog.csdn.net/cnceohjm/article/details/9079829
版权
一 .ashx代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Web.Script.Serialization;
namespace WebApplication1.Handlers
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class PageService : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            //context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");       
            context.Response.ContentType = "text/plain";
            string action = context.Request["action"];
            if (action == "GetPageCount") //如果请求类型为取得总页数，则如下处理。 
            {
                //该方法是建立在强连接DataSet内的，取得总记录数的方法 
                int counts = 100;//new CommentTableAdapter().GetComentCount().Value;
                int page = counts / 10; //默认每页10条数据 
                if (counts % 10 != 0)
                {
                    page++;
                }
                context.Response.Write(page); //取得数据后返回给客户端。 
            }
            else if (action == "GetPageData") //请求类型是取得某页的数据，则还会传一个页码过来 
            {
                int pageNo = Convert.ToInt32(context.Request["PageNo"]);
                //该方法是给出页数，去数据库表内取得对应页的数据 
                var data = TestData(pageNo);        
              
                //将取得数据用json序列化后传回客户端 
                context.Response.Write(Serialize(data));
            }
            //每页条数，和总条数！
            if (action == "pageCount")
            {
                string data = "[{\"pageCount\":\"10\",\"counts\":\"100\"}]";
                context.Response.Write(data);
            }

        }
        public string Serialize(DataTable dt)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
            foreach (DataRow dr in dt.Rows)
            {
                Dictionary<string, object> result = new Dictionary<string, object>();
                foreach (DataColumn dc in dt.Columns)
                {
                    result.Add(dc.ColumnName, dr[dc].ToString());
                }
                list.Add(result);
            }
            return serializer.Serialize(list); ;
        }
        public DataTable TestData(int pageNo)
        {
            DataTable dt = new DataTable("user");
            dt.Columns.Add("name", typeof(string));
            dt.Columns.Add("Comment", typeof(string));
            if (pageNo > 0)
            { }
            else
            { pageNo = 1; }
            for (int i = 0; i <  5; i++)
            {
                DataRow dr = dt.NewRow();
                dr["name"] = "name" + (i*pageNo).ToString();
                dr["Comment"] = (i*pageNo).ToString();
                dt.Rows.Add(dr);
            }

            return dt;
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
二 .aspx代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPager.aspx.cs" Inherits="WebApplication1.AjaxPager" %>

<!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" >
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<head runat="server">
    <title></title>
    <style type="text/css">
        #goNum
        {
            width: 39px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
<script type="text/javascript">
    var pNum = 1;
    $(function() {
        //----------------------------------------------------------- 
        function getPageData(pageNo) { //取得某页数据的方法 
            $.post("Handlers/PageService.ashx", { "action": "GetPageData", "PageNo": pageNo }, function(data, status) {
                if (status == "success") {
                    $("#Comment").empty();
                    var comments = $.parseJSON(data); //反序列化json数据。 
                    for (var i = 0; i < comments.length; i++) {
                        var row = comments[i];
                        var li = $("<li>" + row.name + " : " + row.Comment + "</li>");
                        $("#Comment").append(li); //每取出一条数据就创建一个li并append到Comment/ul内。 
                    }
                }
            });
        }
        //获得json数据3中方法：1.$.ajax 2 $.post（此方法还的反序列化）3. getJson-------------------------------------------------------------------
        getPageData(1); //
        $("#pNum").html("1");
        //               $.ajax({
        //                   type: 'GET',   //获得数据的方式 get 和post
        //                   url: 'Handlers/PageService.ashx?action=pageCount',  //url地址也可以是txt文本
        //                   dataType: 'json',   //数据类型 text 、json等
        //                  // data: 'action=pageCount',  //传递的参数 最后呈现效果 JsonHandler.ashx?type='';
        //                   success: function(msg) {
        //                       $.each(msg, function(i, n) { $("#pageCount").html(n["pageCount"]); $("#counts").html(n["counts"]); });
        //                   },  //成功时的处理
        //                   error: function(data) { alert(data); }  //失败时的处理
        //               })
        $.post("Handlers/PageService.ashx?action=pageCount", function(data, status) { if (status == "success") { var comments = $.parseJSON(data); $("#pageCount").html(comments[0].pageCount); $("#counts").html(comments[0].counts); } });

        //  $.getJSON("Handlers/PageService.ashx?action=pageCount", function(data) { $.each(data, function(i, da) { $("#pageCount").html(da["pageCount"]); $("#counts").html(da["counts"]); }); });
        //----------------------------------------------------------------/ 
        //取得所有的页数并且初始化分页按钮 
        $.post("Handlers/PageService.ashx", { "action": "GetPageCount" }, function(data, status) {
            if (status == "success") {
                var pageNo = parseInt(data);
                //上一页---------------------------------------------------------------
                $("#prev").click(function() { //页码创建后，就为每一个页码监听一个click事件。
                    if (pNum > 1) {
                        pNum--;
                        getPageData(pNum); //点击后就去执行取页数据的操作。
                        $("#pNum").html(pNum);
                    }
                    else
                    { alert("已经是第一页了！") }
                });
                //下一页----------------------------------------------------
                $("#next").click(function() {
                    if (pNum < pageNo) {
                        pNum++;
                        getPageData(pNum);
                        $("#pNum").html(pNum);
                    } else {
                        alert("已经是最后1页了！");
                    }
                });
                //首页-------------------------------------------------
                $("#first").click(function() {
                    pNum = 1;
                    getPageData(1);
                    $("#pNum").html(1);
                });
                //尾页-------------------------------------------------
                $("#last").click(function() {
                    pNum = pageNo;
                    getPageData(pageNo);
                    $("#pNum").html(pageNo);
                });
                //Go按钮-------------------------------------------------
                $("#go").click(function() {
                    pNum = $("#goNum").val();
                    if ((pNum >= 1) && (pNum <= 10)) {
                        getPageData(pNum);
                        $("#pNum").html(pNum);
                    }
                    else
                    { alert("请输入正确的页数！"); }

                });
                //-------------------------------------------------

            }
        });
        //----------------------------------------------------------------------------

    });

</script> 
<ul id="Comment"></ul><br /> 
页数：
<table id="pageNo"></table> 
当前页：第<span id="pNum"></span>页 / 每页条数：<span id="pageCount"></span>条/总条数：<span id="counts"></span>条<input  type="button" value="首1页" id="first"/> <input  type="button" value="上一页" id="prev"/> <input  type="button" value="下一页"  id="next"/> <input  type="button" value="尾页" id="last"/> 
        跳转的页数：<input type="text" id="goNum"/> <input type="button"  id="go" value="Go"/>

    </div>
    </form>
</body>
</html>
H_Gragon
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net中Ajax分页实例

一 .ashx代码：using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;using System.Data;using System.Web.Script.Serialization;namespace WebApplic
复制链接

扫一扫