c#与jquery实现局部刷新分页的代码

发布时间:2020-06-16编辑:脚本学堂
本文介绍下,c#与jquery结合,实现局部刷新分页的一例代码,有需要的朋友,不妨参考学习下。

1、ashx代码部分
 

复制代码 代码示例:

<%@ WebHandler Language="C#" Class="page" %>
using System;
using System.Web;
using System.Data;
using System.Web.Script.Serialization;
using System.Collections.Generic;
//using System.Linq;

public class page : IHttpHandler {
    public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/plain";
    //context.Response.Write("Hello World");
      
    string action = context.Request["action"].ToString(); //接受前台传来的action的值
    //---------------------    
    //datatable数据库内容
    //---------------------
     DataTable newdtb = new DataTable();
     newdtb.Columns.Add("Id", typeof(int));
     newdtb.Columns.Add("centent", typeof(string));
     newdtb.Columns["Id"].AutoIncrement = true;
      
     for (int i = 1; i < 20; i++)
     {
         DataRow newRow = newdtb.NewRow();
         newRow["centent"] = "我要成功,我要奋斗,我要有自己的事业";
         newdtb.Rows.Add(newRow);
     }

     if (action == "main")
     {
         int number = Convert.ToInt32(context.Request["number"]);  //前台传过来的数据,就是第几页
         int start = (number - 1) * 5;  //计算出从哪行开始查询
         int end = start + 4;   //计算出查询到哪行结束
         List<pageFen> ls = new List<pageFen>();
         for (int i = start; i < end; i++)
         {
          pageFen pf = new pageFen();
          pf.id = Convert.ToInt32(newdtb.Rows[i]["Id"]);
          pf.centent = newdtb.Rows[i]["centent"].ToString();
          ls.Add(pf);
         }

         javascriptSerializer jss = new JavaScriptSerializer();
         context.Response.Write(jss.Serialize(ls));
     }
      
     //得到数据需要分几页
     if (action == "page")
     {
         int count = Convert.ToInt32(newdtb.Rows.Count);
         int page = count / 5;
         if (count % 5 != 0)
         {
          page++;
         }
         context.Response.Write(page);
     }

    }
    public class pageFen
    {
     public  int id { get; set; }
     public  string centent { get; set; }
    }
    public bool IsReusable {
     get {
         return false;
     }
    }
}

2、js与html内容部分
 

复制代码 代码示例:
<script type="text/javascript">
  /**
   * jquery 局部刷新分页
   * edit www.jb200.com
  */
     $(function () {
         $.post("page.ashx", { "action": "page" }, function (data, status) {
          if (status == "success") {
              for (var i = 1; i <= data; i++) {
               var count = $("<td><a href='#'>" + i + "</a></td>");
               count.click(function (e) {  //给每一个a监听click事件
                   e.preventDefault();   //不要导向连接地址
                   var number = $(this).text(); //得到a里的数据,也就是哪页
                   $("#cont").empty(); //清空数据
                   //向后台发送请求
                   $.post("page.ashx", { "action": "main", "number": number },
                   function (data, status) {
                    if (status == "success") {
                        var content = $.parseJSON(data);
                        $.each(content, function () {
                         var jj = $("<li>" + this.id + this.centent + "</li>");
                         $("#cont").append(jj);
                        });
                    }
                   });
               });
               $("#count").append(count);
              }            
          }
         });
     })
    </script>
<body>
<ul id="cont">
</ul>
<table>
<tr id="count">
</tr>
</table>
</body>
 

有兴趣的朋友,可以动手测试下这段jquery 局部刷新分页的代码,看看效果咱样呢?!