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

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

本篇文章主要是对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" ""><html xmlns=""><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; } }

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

上一篇：MVVM模式中ViewModel和View、Model有什么区别？

下一篇：oraclerman备份日志单独备份和交叉校验

完