本篇文章主要是對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; } }
