asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

  

复制代码 代码如下:

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %>

  <!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 runat="server">

  <title>Jquery+Ajax+Json分页</title>

  <meta http-equiv="content-type" content="text/html; charset=gb2312">

  <link href="Styles/tablecloth.css" rel="stylesheet" type="text/css" />

  <link href="Styles/pagination.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>

  <script type="text/javascript" src="Scripts/jquery.pagination.js"></script>

  <script type="text/javascript">

  var pageIndex = 0;     //页面索引初始值

  var pageSize = 10;     //每页显示条数初始化,修改显示条数,修改这里即可

  $(function () {

  InitTable(0);    //Load事件,初始化表格数据,页面索引为0(第一页)

  //分页,PageCount是总条目数,这是必选参数,其它参数都是可选

  $("#Pagination").pagination(<%=pageCount %>, {

  callback: PageCallback,

  prev_text: '上一页',       //上一页按钮里text

  next_text: '下一页',       //下一页按钮里text

  items_per_page: pageSize,  //显示条数

  num_display_entries: 6,    //连续分页主体部分分页条目数

  current_page: pageIndex,   //当前页索引

  num_edge_entries: 2        //两侧首尾分页条目数

  });

  //翻页调用

  function PageCallback(index, jq) {

  InitTable(index);

  }

  //请求数据

  function InitTable(pageIndex) {

  $.ajax({

  type: "POST",

  dataType: "json",

  url: 'SupplyAJAX.aspx',      //提交到一般处理程序请求数据

  data: "type=show&random=" + Math.random() + "&pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize, //提交两个参数:pageIndex(页面索引),pageSize(显示条数)

  error: function () { alert('error data'); },  //错误执行方法

  success: function (data) {

  $("#Result tr:gt(0)").remove();        //移除Id为Result的表格里的行,从第二行开始(这里根据页面布局不同页变)

  var json = data; //数组

  var html = "";

  $.each(json.data, function (index, item) {

  //循环获取数据

  var id = item.Id;

  var name = item.Name;

  var sex = item.Sex;

  html += "<tr><td>" + id + "</td><td>" + name + "</td><td>" + sex + "</td></tr>";

  });

  $("#Result").append(html);             //将返回的数据追加到表格

  }

  });

  }

  });

  </script>

  </head>

  <body>

  <form id="form1" runat="server">

  <table id="Result" cellspacing="0" cellpadding="0">

  <tr>

  <th>

  编号

  </th>

  <th>

  姓名

  </th>

  <th>

  性别

  </th>

  </tr>

  </table>

  <div id="Pagination">

  </div>

  </form>

  </body>

  </html>

  

复制代码 代码如下:

  using System;

  using System.Collections.Generic;

  using System.Linq;

  using System.Web;

  using System.Text;

  using System.Net;

  using System.IO;

  using System.Web.UI;

  using System.Web.UI.WebControls;

  public partial class AjaxJson : System.Web.UI.Page

  {

  public string pageCount = string.Empty; //总条目数

  protected void Page_Load(object sender, EventArgs e)

  {

  if (!IsPostBack)

  {

  string url = "/SupplyAJAX.aspx";

  string strResult = GetRequestJsonString(url, "type=getcount");

  pageCount = strResult.ToString();

  }

  }

  #region 后台获取ashx返回的数据

  /// <summary>

  /// 后台获取ashx返回的数据

  /// </summary>

  /// <param name="relativePath">地址</param>

  /// <param name="data">参数</param>

  /// <returns></returns>

  public static string GetRequestJsonString(string relativePath, string data)

  {

  string requestUrl = GetRequestUrl(relativePath, data);

  try

  {

  WebRequest request = WebRequest.Create(requestUrl);

  request.Method = "GET";

  StreamReader jsonStream = new StreamReader(request.GetResponse().GetResponseStream());

  string jsonObject = jsonStream.ReadToEnd();

  return jsonObject;

  }

  catch

  {

  return string.Empty;

  }

  }

  public static string GetRequestUrl(string relativePath, string data)

  {

  string absolutePath = HttpContext.Current.Request.Url.AbsoluteUri;

  string hostNameAndPort = HttpContext.Current.Request.Url.Authority;

  string applicationDir = HttpContext.Current.Request.ApplicationPath;

  StringBuilder sbRequestUrl = new StringBuilder();

  sbRequestUrl.Append(absolutePath.Substring(0, absolutePath.IndexOf(hostNameAndPort)));

  sbRequestUrl.Append(hostNameAndPort);

  sbRequestUrl.Append(applicationDir);

  sbRequestUrl.Append(relativePath);

  if (!string.IsNullOrEmpty(data))

  {

  sbRequestUrl.Append("?");

  sbRequestUrl.Append(data);

  }

  return sbRequestUrl.ToString();

  }

  #endregion

  }

  

复制代码 代码如下:

  using System;

  using System.Collections.Generic;

  using System.Linq;

  using System.Web;

  using System.Data;

  using System.Web.UI;

  using System.Web.UI.WebControls;

  //新增

  using System.Web.Script.Serialization;

  using System.Text;

  public partial class SupplyAJAX : System.Web.UI.Page

  {

  protected static List<Student> StudentList = new List<Student>();

  protected static int RecordCount = 0;

  protected static DataTable dt = CreateDT();

  protected void Page_Load(object sender, EventArgs e)

  {

  switch (Request["type"])

  {

  case "show":

  #region 分页配置

  //具体的页面数

  int pageIndex;

  int.TryParse(Request["pageIndex"], out pageIndex);

  //页面显示条数

  int PageSize = Convert.ToInt32(Request["pageSize"]);

  if (pageIndex == 0)

  {

  pageIndex = 1;

  }

  #endregion

  DataTable PagedDT = GetPagedTable(dt, pageIndex, PageSize);

  List<Student> list = new List<Student>();

  foreach (DataRow dr in PagedDT.Rows)

  {

  Student c = new Student();

  c.Id = (Int32)dr["Id"];

  c.Name = dr["Name"].ToString();

  c.Sex = dr["Sex"].ToString();

  list.Add(c);

  }

  string json = new JavaScriptSerializer().Serialize(list);//这个很关键,否则error

  StringBuilder Builder = new StringBuilder();

  Builder.Append("{");

  Builder.Append("\"recordcount\":" + RecordCount + ",");

  Builder.Append("\"data\":");

  Builder.Append(json);

  Builder.Append("}");

  Response.ContentType = "application/json";

  Response.Write(Builder.ToString());

  break;

  case "getcount":

  Response.Write(dt.Rows.Count);

  break;

  case "add":

  break;

  case "update":

  break;

  case "delete":

  break;

  }

  Response.End();

  }

  #region 模拟数据

  private static DataTable CreateDT()

  {

  DataTable dt = new DataTable();

  dt.Columns.Add(new DataColumn("Id", typeof(int)) { DefaultValue = 0 });

  dt.Columns.Add(new DataColumn("Name", typeof(string)) { DefaultValue = "1" });

  dt.Columns.Add(new DataColumn("Sex", typeof(string)) { DefaultValue = "男" });

  for (int i = 1; i <= 1000; i++)

  {

  dt.Rows.Add(i, "张三" + i.ToString().PadLeft(4, '0'));

  }

  RecordCount = dt.Rows.Count;

  return dt;

  }

  #endregion

  /// <summary>

  /// 对DataTable进行分页,起始页为1

  /// </summary>

  /// <param name="dt"></param>

  /// <param name="PageIndex"></param>

  /// <param name="PageSize"></param>

  /// <returns></returns>

  public static DataTable GetPagedTable(DataTable dt, int PageIndex, int PageSize)

  {

  if (PageIndex == 0)

  return dt;

  DataTable newdt = dt.Copy();

  newdt.Clear();

  int rowbegin = (PageIndex - 1) * PageSize;

  int rowend = PageIndex * PageSize;

  if (rowbegin >= dt.Rows.Count)

  return newdt;

  if (rowend > dt.Rows.Count)

  rowend = dt.Rows.Count;

  for (int i = rowbegin; i <= rowend - 1; i++)

  {

  DataRow newdr = newdt.NewRow();

  DataRow dr = dt.Rows[i];

  foreach (DataColumn column in dt.Columns)

  {

  newdr[column.ColumnName] = dr[column.ColumnName];

  }

  newdt.Rows.Add(newdr);

  }

  return newdt;

  }

  /// <summary>

  /// 获取总页数

  /// </summary>

  /// <param name="sumCount">结果集数量</param>

  /// <param name="pageSize">页面数量</param>

  /// <returns></returns>

  public static int getPageCount(int sumCount, int pageSize)

  {

  int page = sumCount / pageSize;

  if (sumCount % pageSize > 0)

  {

  page = page + 1;

  }

  return page;

  }

  public struct Student

  {

  public int Id;

  public string Name;

  public string Sex;

  }

  }