ASP.Net中无刷新分页的实现

点击下面的链接转到视频教程页面

    ASP.Net中无刷新分页的实现,我相信经常上网的朋友都会遇到过这样的情况→有一个很火爆的视频 底下评论留言达上千条  你一遍看视频一遍看评论  当前页面的评论看完了 你想看第二页,当你点击第二页的时候  是不是整个页面都刷新了呢????我想答案是否定的,如果整个页面都刷新了,那么我们的视频又会从头开始,每点击下一页就重看一次那一个视频我们什么时候能看完呢?杯具了!!

   程序员都是聪明的,程序员一定想如果在查看评论的时候不让它刷新或者局部刷新多好啊(单单评论的地方刷新)程序员都是伟大的,没有他们客服不了的困难,伟大的ajax给我们提供了无刷新的技术,伟大的sql让我们做分页变的更加的简单,好下面正式进入我们今天的课程。

一、知识点

1、jquery的ajax实现无刷新

2、在sql中得到行号

二、实现步骤

1、在页面中放置两个超链接标签,和一个表格显示分页的页号

<a style="float:left" href="javascript:void(0)" id="linkPrev" >上一页</a>
<table style="float:left"><tbody><tr id="numberPagerRow"></tr></tbody></table>
<a style="float:left" href="javascript:void(0)" id="linkNext">下一页</a>


 2、在我们页面首次加载的时候我们要做的操作就是得到第一页的前10行。

 

  //在页面加载的时候要做的事情

var CurrentPageNum = 1;



     下面的代码是在ready()事件中加载第一页的数据  我们用了一个匿名的函数  ShowPage

   $(function() {

            ShowPage(1);
          
        });


 

 var ShowPage = function(n) {
            //下面的代码的意思是向后台的处理数据的页面GetDataPage.ashx发送请求  由后台页面返回数据data.{"pagenum":CurrentPageNum}    传递参数
            $.post("GetDataPage.ashx", { "pagenum": n }, function(data) {
                //获得总的页码数
                var ToalPageNum = data.PageCount;
                $("#numberPagerRow td").remove();
                for (var i = 1; i <= ToalPageNum; i++) {
                    $("<td>" + i + "</td>").click(function() {

                    CurrentPageNum = parseInt($(this).text()); ShowPage(CurrentPageNum);


                    }).appendTo(("#numberPagerRow"));

                }
                //获得总的表的行
                var table = data.Comm;
                $("#mytbody tr").remove();
                for (var i = 0; i < table.length; i++) {
                    var item = table[i];
                    //移除旧的数据


                    $("<tr><td>" + item.Title + "</td><td>" + item.Subject + "</td><td>" + item.Time + "</td></tr>").appendTo(("#mytbody"));
                }
            }, "json");

        }


上面代码中是向$.post("GetDataPage.ashx", { "pagenum": n }, function(data) {} GetDataPage这个一般处理程序发送了请求  post请求  我们看在这个页面中的代码:

  

public class GetDataPage : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int tolNum;
            DataTable dt = new DataTable();
            string pagenumstr = context.Request["pagenum"];
            int pagenum = Convert.ToInt32(pagenumstr);
            string constr = @"Data Source=.\sqlexpress;Initial Catalog=MySchool;Persist Security Info=True;User ID=sa;Password=dalu123,;Pooling=False";
            using (SqlConnection con = new SqlConnection(constr))
            {con.Open();
                using (SqlCommand cmd = con.CreateCommand())
                {
                    //下面的sql语句中Row_Number()是给每一行加一个行号的意思 over(order by ID)是一个开创行数 其中over中的参数是排序必不可少
                    //第一页的时候是第一行到第10行的内容
                    //第二页是第11行到第20行的内容
                    //第n页是第(n-1)*10+1 到n*10
                    cmd.CommandText = "select t.* from(select *,Row_Number() over(order by ID) rownum from Liuyan) t where t.rownum>=(@n-1)*10+1 and t.rownum<=@n*10 ";
                    cmd.Parameters.AddWithValue("@n", pagenum);
                   
                    using(SqlDataAdapter adapter=new SqlDataAdapter(cmd))
                    {
                        adapter.Fill(dt);
                       
                        
                    }
                }
            
            }

            using (SqlConnection con = new SqlConnection(constr))
            {
                con.Open();
                using (SqlCommand cmd = con.CreateCommand())
                {
                    
                    cmd.CommandText = "select count(*) from Liuyan ";
                    tolNum=Convert.ToInt32(cmd.ExecuteScalar());
                    
                }

            }

            PageResult pr = new PageResult();
            pr.PageCount = (int)Math.Ceiling(tolNum / 10.0);//0.1→1,0.95→1,1.01→2,1.0→1//总页数。  tolNum;
            pr.Comm = new commentInfo[dt.Rows.Count];
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                pr.Comm[i] = new commentInfo() { Title=dt.Rows[i]["Title"].ToString(), Subject=dt.Rows[i]["Subject"].ToString(), Time=DateTime.Now };
            }
            context.Response.Write(new JavaScriptSerializer().Serialize(pr));
            
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
    class PageResult
    {
        public commentInfo[] Comm { get; set; }
        public int PageCount { get; set; }
    
    }
    class commentInfo
    {
        public string Title { get; set; }
        public string Subject { get; set; }
        public DateTime Time { get; set; }
    }


在上面的代码中我们就是多写了两个类,因为我们在用json向客户端传送数据的时候,我们的dataTable是传不过去的  所有我们写了两个类   。

当我们点上一页和下一页的时候所做的操作如下:

也是在ready时间中添加了点击上一页和下一页的代码   

 //在页面加载的时候要做的事情
        $(function() {

            ShowPage(1);
            //上一页的代码;
            $("#linkPrev").click(function() {
                CurrentPageNum++;
                ShowPage(CurrentPageNum);
            });

            //点击下一页所做的操作
            $("#linkNext").click(function() {
                CurrentPageNum--;
                ShowPage(CurrentPageNum);
            });


        });
   

 

 

ajax+c# 无刷新分页,推荐 <script type="text/javascript"> var orderby=""; $().ready(function() { InitData(0); $("#pageTheme").change(function(){ $("#Pagination").attr('class',$(this).val()); }); }); function pageselectCallback(page_id, jq) { // alert(page_id); InitData(page_id); } function InitData(pageindx) { var tbody = ""; $.ajax({ type: "POST",//用POST方式传输 dataType:"json",//数据格式:JSON url:'handler.ashx',//目标地址 data:"p="+(pageindx+1)+"&orderby="+orderby, beforeSend:function(){$("#divload").show();$("#Pagination").hide();},//发送数据之前 complete:function(){$("#divload").hide();$("#Pagination").show()},//接收数据完毕 success:function(json) { $("#productTable tr:gt(0)").remove(); var productData = json.Products; $.each(productData, function(i, n) { var trs = ""; trs += "<tr><td>" + n.orderid + "</td><td>" + n.customerid + "</td><td>" + n.shipname + "</td><td>" + n.shipcity + "</td></tr>"; tbody += trs; }); $("#productTable").append(tbody); $("#productTable tr:gt(0):odd").attr("class", "odd"); $("#productTable tr:gt(0):even").attr("class", "enen"); $("#productTable tr:gt(0)").hover(function(){ $(this).addClass('mouseover'); },function(){ $(this).removeClass('mouseover'); }); }}); $("#Pagination").pagination(<%=pagecount %>, { callback: pageselectCallback, prev_text: '« Previous', next_text: 'Next »', items_per_page:20, num_display_entries:6, current_page:pageindx, num_edge_entries:2 }); } function Sort(ordercolumn,ordertipid) { var ordertype="";//1:desc,0:asc var $orderimg = $("#"+ordertipid); if($orderimg.html()!="") { var imgsrc = $("img",$orderimg).attr("src"); if(imgsrc.indexOf("asc")>-1){ $(".ordertip").empty(); $orderimg.html(" <img src=\"images/sort_desc.gif\" align=\"absmiddle\">"); ordertype = 1; }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值