ASP.NET中无刷新分页
上次介绍了我们代码写的刷新分页，这次就来说说无刷新分页。
这次我们是在上次的基础上改动了一些，我们都知道想要无刷新，就需要Ajax,在我们的ASP.NET中AJax是和一般处理程序配合着用的。
无刷新就只在我们的两个位子，一个是呈现数据的位子，另一个则是在分页里面。
也就是：
和
我们点不同的页码是换掉这两个位子就OK了。
原理：
1， 换分页字符串
还记不记我们的分页怎么来的？对，就是一串字符，我们再后台拼接的，我们点页码时去访问处理程序，然后返回一个分页字符串，我们把分页字符串在重新插入分页里面，那么分页里面的页码就会随之改变，我们的第一个大问题解决。
2，换数据
字符串在后台返回的，那我们的数据也可以从后台返回，然后在前台把下面显示数据的tr换掉就可以了。
总：后台返回我们需要的数据，在页面上替换原来的数据就可以实现我们的无刷新了。
页面
<form id="form1" runat="server"> <div> <asp:GridView runat="server" AutoGenerateColumns="False" DataKeyNames="ID" ID="gvTest"> <Columns> <asp:BoundField DataField="ID" HeaderText="编号" InsertVisible="False" ReadOnly="True" SortExpression="ID" /> <asp:BoundField DataField="FileName" HeaderText="文件名" SortExpression="FileName" /> <asp:BoundField DataField="Problems" HeaderText="问题" SortExpression="Problems" /> <asp:BoundField DataField="FamilyBackground" HeaderText="家庭背景" SortExpression="FamilyBackground" /> <asp:BoundField DataField="FamilySpecify" HeaderText="家庭特点" SortExpression="FamilySpecify" /> <asp:BoundField DataField="Academically" HeaderText="What" SortExpression="Academically" /> <asp:BoundField DataField="Classmates" HeaderText="Classmates" SortExpression="Classmates" /> <asp:BoundField DataField="Teaching" HeaderText="教育" SortExpression="Teaching" /> <asp:BoundField DataField="Adaptability" HeaderText="能力" SortExpression="Adaptability" /> </Columns> </asp:GridView> //最终会生成表格 <br /> //分页 <div class="page"> <div class="details"> <span>每页<font><%=PageSize %></font>条</span> <span>共<font><%=PageCount %></font>条记录</span> </div> <div id="PageContent" class="paging" runat="server"> </div> </div> </div> <script src="jquery-1.11.2.min.js"></script> <script> function Jump(b,c,d) { //跳转方法 var a = $("#textPage").val(); //当前页码 GetPage(a,b,c,d); //把当前页赋值后传过来 } function GetPage(a, b, c, d) { $.ajax({ type: "post", url: "PageHandler.ashx?PageIndex=" + a, datatype: "json", data: "PageSize=" + b + "&PageCount=" + c + "&CentSize=" + d, async: false, success: function (data) {
注： eval(data)这样转型在此处用不了 var obj = $.parseJSON(data); //转成josn格式 console.log(obj); //查看下你要的数据是不是对的 $("#PageContent").empty();//把原来的分页删除 $("#PageContent").append(obj.str); //换上我们更新后的字符串 $("#gvTest tr:gt(1)").remove();//除了头不用移除其余都移除 var strHtml = " "; $.each(obj.pageList, function (i, item) { var FileName = item.FileName == null ? "" : item.FileName; var Problems = item.Problems == null ? "" : item.Problems; var FamilyBackground = item.FamilyBackground == null ? "" : item.FamilyBackground; var FamilySpecify = item.FamilySpecify == null ? "" : item.FamilySpecify; var Academically = item.Academically == null ? "" : item.Academically; var Classmates = item.Classmates == null ? "" : item.Classmates; var Teaching = item.Teaching == null ? "" : item.Teaching; var Adaptability = item.Adaptability == null ? "" : item.Adaptability;
//拼接我们新的数据 strHtml += "<tr> "; strHtml += "<td>" + item.ID + "</td><td>" + FileName + "</td>"; strHtml += "<td>" + Problems + "</td><td>" + FamilyBackground + "</td>"; strHtml += "<td>" + FamilySpecify + "</td><td>" + Academically + "</td>"; strHtml += "<td>" + Classmates + "</td><td>" + Teaching + "</td>"; strHtml += "<td>" + Adaptability + "</td> "; strHtml += "</tr> "; }) $("#gvTest").append(strHtml); //添加进来 }, erro: function () { alert("出错了"); } }) } </script> </form>
我们返回的Josn格式
样式：
.page { 100%; float: left; margin: -1px 0 0 0; background: #C9E4FF; } .details { height: 26px; float: left; padding: 16px 0 16px 16px; } .details span { height: 26px; line-height: 26px; float: left; padding: 0 5px 0 0; } .details span font { padding: 0 5px; } .paging { height: 26px; float: right; padding: 16px 16px 16px 0; } .paging a { height: 26px; float: left; line-height: 26px; padding: 0 9px; margin: 0 0 0 6px; background: #FFF; border-radius: 2px; } .paging span { height: 26px; float: left; line-height: 26px; padding: 0 10px; margin: 0 0 0 6px; } .paging span.opt { background: #009EFF; color: #FFF; } .paging a:hover { text-decoration: none; } .paging input { 58px; height: 26px; float: left; margin: 0 0 0 6px; text-align: center; /* border:1px solid #D2D7DD; border-right:0px;*/ } .paging a.res { height: 26px; float: left; color: #FFF; line-height: 26px; margin: 0px; border: 0px; background: #009EFF; border-radius: 0 2px 2px 0; } .paging a.res:hover { background: #00B6EC; } .paging span.cpb { background: #009EFF; color: #FFF; } .paging span.disabled, .paging span.disabled { height: 26px; float: left; line-height: 26px; padding: 0 9px; margin: 0 0 0 6px; background: #FFF; } #gvTest tr th { 10%; }
后台： 主要第一次呈现数据
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //点的是第几页 PageIndex = Request.QueryString["PageIndex"] == null ? 1 : Convert.ToInt32(Request.QueryString["PageIndex"].ToString()); Binds(); } } void Binds() { SqlConnection conn = new SqlConnection(conStr); SqlDataAdapter sdas = new SqlDataAdapter("select count(*) from Boda_Follow", conStr); DataSet da = new DataSet(); sdas.Fill(da); //string textPage = hfPage.Value; 跳转的值 //总记录数 PageCount =Convert.ToInt32(da.Tables[0].Rows[0][0].ToString()); //计算总页数 if (PageCount % PageSize == 0) { TotalPage = PageCount / PageSize; } else { TotalPage = (PageCount / PageSize) + 1; } //SQL语句 string sql = "select top " + PageSize + "* from Boda_Follow where ID not in (select top " + PageSize * (PageIndex - 1) + " ID from Boda_Follow)"; SqlDataAdapter sda = new SqlDataAdapter(sql, conStr); DataSet ds = new DataSet(); sda.Fill(ds); gvTest.DataSource = ds.Tables[0]; gvTest.DataBind(); PageContent.InnerHtml = TestPage.OutPageList(this.PageSize,this.PageIndex, this.PageCount, 5); //var dd =new { data = "1", dd = 2 }; }
我们第一次的分页字符串
#region 显示分页 /// <summary> /// 返回分页页码 /// </summary> /// <param name="pageSize">页面大小</param> /// <param name="pageIndex">当前页</param> /// <param name="totalCount">总记录数</param> /// <param name="linkUrl">链接地址，__id__代表页码</param> /// <param name="centSize">中间页码数量</param> /// <returns></returns> public static string OutPageList(int pageSize, int pageIndex, int totalCount, int centSize) { string aa = pageSize + "," + totalCount + "," + centSize; //计算页数 if (totalCount < 1 || pageSize < 1) { return ""; } int pageCount = totalCount / pageSize; if (totalCount % pageSize > 0) { pageCount += 1; } if (pageCount < 1) { return ""; } StringBuilder pageStr = new StringBuilder();
string firstBtn = "<a href="javascript:GetPage(" +(pageIndex-1)+","+aa+ ")">«上一页</a>";;
string lastBtn = "<a href="javascript:GetPage(" +(pageIndex+1)+","+aa+ ")">下一页»</a>";
string firstStr = "<a href="javascript:GetPage(" +1+","+aa+ ")">1</a>";
string lastStr = "<a href="javascript:GetPage(" +pageCount+","+aa+ ")">" + pageCount.ToString() + "</a>";
string textPage = "<input >; string JumpPage = "<a class="res" href="javascript:Jump("+ aa + ")">跳转</a>"; if (pageIndex <= 1) { firstBtn = "<span class="disabled">«上一页</span>"; } if (pageIndex >= pageCount) { lastBtn = "<span class="disabled">下一页»</span>"; } if (pageIndex == 1) { firstStr = "<span class="cpb">1</span>"; } if (pageIndex == pageCount && pageCount > 1) { lastStr = "<span class="cpb">" + pageCount.ToString() + "</span>"; } else if (pageCount == 1) { lastStr = ""; } int firstNum = pageIndex - (centSize / 2); //中间开始的页码 if (pageIndex < centSize) firstNum = 2; int lastNum = pageIndex + centSize - ((centSize / 2) + 1); //中间结束的页码 if (lastNum >= pageCount) lastNum = pageCount - 1; pageStr.Append(firstBtn + firstStr); if (pageIndex >= centSize) { pageStr.Append("<span>...</span> "); } for (int i = firstNum; i <= lastNum; i++) { if (i == pageIndex) { pageStr.Append("<span class="cpb">" + i + "</span>"); } else { pageStr.Append("<a href="javascript:GetPage(" +i+","+ aa + ")">" + i + "</a>"); } } if (pageCount - pageIndex > centSize - ((centSize / 2))) { pageStr.Append("<span>...</span>"); } pageStr.Append(lastStr + lastBtn); pageStr.Append(textPage); pageStr.Append(JumpPage); return pageStr.ToString(); }
处理程序
需要引用，这个需要去网上下载的
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; int PageIndex = Convert.ToInt32(context.Request.QueryString["PageIndex"]); //当前页码 int PageSize = Convert.ToInt32(context.Request.Form["PageSize"]); //每页大小 int PageCount = Convert.ToInt32(context.Request.Form["PageCount"]);//总记录数 int CentSize = Convert.ToInt32(context.Request.Form["CentSize"]); //中间显示多少个 string strPage = strHtml(PageSize, PageIndex, PageCount, CentSize); string sql = "select top " + PageSize + "* from Boda_Follow where ID not in (select top " + PageSize * (PageIndex - 1) + " ID from Boda_Follow)"; SqlDataAdapter sda = new SqlDataAdapter(sql, conStr); DataSet ds = new DataSet(); sda.Fill(ds); var data = new { str = strPage,pageList=ds.Tables[0]}; //json数据格式，我们再前台转换就可以用 context.Response.Write(JsonConvert.SerializeObject(data));
/// <summary> /// 分页字符串 /// </summary> /// <param name="pageSize">每页显示多少个</param> /// <param name="pageIndex">当前页码</param> /// <param name="totalCount">总记录数</param> /// <param name="centSize">中间显示多少个页码</param> /// <returns>分页字符串</returns> public string strHtml(int pageSize, int pageIndex, int totalCount, int centSize) { string aa = pageSize + "," + totalCount + "," + centSize; //我们传递的参数 //计算页数 if (totalCount < 1 || pageSize < 1) { return ""; } int pageCount = totalCount / pageSize; if (totalCount % pageSize > 0) { pageCount += 1; } if (pageCount < 1) { return ""; } StringBuilder pageStr = new StringBuilder(); string firstBtn = "<a href="javascript:GetPage(" +(pageIndex-1)+","+aa+ ")">«上一页</a>";; string lastBtn = "<a href="javascript:GetPage(" +(pageIndex+1)+","+aa+ ")">下一页»</a>"; string firstStr = "<a href="javascript:GetPage(" +1+","+aa+ ")">1</a>"; string lastStr = "<a href="javascript:GetPage(" +pageCount+","+aa+ ")">" + pageCount.ToString() + "</a>"; string textPage = "<input >; string JumpPage = "<a class="res" href="javascript:Jump("+ aa + ")">跳转</a>"; if (pageIndex <= 1) { firstBtn = "<span class="disabled">«上一页</span>"; } if (pageIndex >= pageCount) { lastBtn = "<span class="disabled">下一页»</span>"; } if (pageIndex == 1) { firstStr = "<span class="cpb">1</span>"; } if (pageIndex == pageCount && pageCount > 1) { lastStr = "<span class="cpb">" + pageCount.ToString() + "</span>"; } else if (pageCount == 1) { lastStr = ""; } int firstNum = pageIndex - (centSize / 2); //中间开始的页码 if (pageIndex < centSize) firstNum = 2; int lastNum = pageIndex + centSize - ((centSize / 2) + 1); //中间结束的页码 if (lastNum >= pageCount) lastNum = pageCount - 1; pageStr.Append(firstBtn + firstStr); if (pageIndex >= centSize) { pageStr.Append("<span>...</span> "); } for (int i = firstNum; i <= lastNum; i++) { if (i == pageIndex) { pageStr.Append("<span class="cpb">" + i + "</span>"); } else { pageStr.Append("<a href="javascript:GetPage(" + i+","+ aa + ")">" + i + "</a>"); } } if (pageCount - pageIndex > centSize - ((centSize / 2))) { pageStr.Append("<span>...</span>"); } pageStr.Append(lastStr + lastBtn); pageStr.Append(textPage); pageStr.Append(JumpPage); return pageStr.ToString(); }
你点页码就是无刷新的了。 上篇 自定义ASP.NET中刷新分页