Posted in Javascript onApril 01, 2010
控件类代码:
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Reflection; using System.IO; [assembly: WebResource("PageBarJS.js", "application/x-javascript")] namespace Hawkon.Control { [DefaultProperty("Text")] [ToolboxData("<{0}:PageBar runat=server></{0}:PageBar>")] public class PageBar : WebControl { [Bindable(true)] [Category("Data")] [DefaultValue("1")] [Localizable(true)] public int PageIndex { get { return pageIndex; } set { pageIndex = value; } } private int pageIndex; [Bindable(true)] [Category("Data")] [DefaultValue("1")] [Localizable(true)] public int PageCount { get { return pageCount; } set { pageCount = value; } } private int pageCount; [Bindable(true)] [Category("Data")] [DefaultValue("5")] [Localizable(true)] public int DisplayCount { get { return displayCount; } set { displayCount = value; } } private int displayCount; protected override void RenderContents(HtmlTextWriter output) { string html = ""; html += CreateA(1, "<<"); int b = 0, e = 0; if (pageIndex <= displayCount) { b = 1; e = displayCount * 2 + 1; } else if (pageIndex > pageCount - displayCount) { b = pageCount - displayCount * 2; e = pageCount; } else { b = pageIndex - displayCount; e = pageIndex + displayCount; } if (b <= 1) { html += CreateA(1, ""); } else html += CreateA(b - 1, ""); for (int i = b; i <= e; i++) { html += CreateA(i, i.ToString()); } html += CreateA(e + 1, ""); html += CreateA(pageCount, ">>"); // html += string.Format("<script src='{0}' type='text/javascript'></script>", // this.Page.ClientScript.GetWebResourceUrl(typeof(PageBar), "JScript1.js")); output.Write(html); } private string CreateA(int pageIndex, string text) { if (pageIndex == this.pageIndex) { return string.Format("<a class=\"pageA\" title='页' id =\"{0}\">{1}</a> ", pageIndex, text); } return string.Format("<a class=\"pageA\" title='页' href=\"#\" id=\"{0}\">{1}</a> ", pageIndex, text); } protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); string resourceName = "PageBarJS.js"; string url = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "PageBarJS.js"); string script = "\r\n<script src=\"" + HttpUtility.HtmlAttributeEncode(url) + "\" type=\"text/javascript\"></script>"; this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), resourceName, script, false); script = @"<script type=""text/javascript"">$(document).ready(function() {InitPageBar(5, ""BookListByPage"", ""Books "", 50,""pageA"");});</script>"; this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ready", script); } protected override void Render(HtmlTextWriter writer) { base.Render(writer); } } }
JS资源文件代码:
var displayCount; var getDataUrl; var bookTableId; var currentIndex; var pageCount; var linkClass; var fields; function InitPageBar(dc, gdu, btId,pc,lc) { displayCount = dc; getDataUrl = gdu; bookTableId = btId; currentIndex = 1; pageCount = pc; linkClass = "."+lc; $(linkClass).click(GetPage); } function GetPageById(id) { $("#CI").val(id); var surl = getDataUrl+"?pageIndex=" + id; $.ajax({ url: surl, type: "GET", dataType: "json", timeout: 1000, success: showResult } ); } function GetPage() { GetPageById($(this).get(0).id); } function showResult(result) { for (i = 1; i <= result.Data.length; i++) { var id = "#" + bookTableId + " tr:nth-child(" + i + ")"; obj = result.Data[i - 1]; for (var key in obj) { ctl = $(id).find("." + key); if (ctl.length > 0) { ctl.get(0).innerHTML = obj[key]; } } } $(linkClass).each(function(index) { var i, b, e; if (result.CurrentPageIndex <= displayCount) { b = 1; e = (displayCount + 1) * 2; i = index - 2 + 1; } else if (result.CurrentPageIndex > pageCount - displayCount) { b = pageCount - displayCount * 2; e = pageCount; i = pageCount - displayCount * 2 + index - 2; } else { i = result.CurrentPageIndex - displayCount + index - 2; b = result.CurrentPageIndex - displayCount - 1; e = result.CurrentPageIndex + displayCount + 1; } if ($(this).get(0).id == $(this).text()) { $(this).text(i); } else if (index == 1) { if (b <= 1) { $(this).get(0).id = 1; } else { $(this).get(0).id = b - 1; } } else if (index == displayCount * 2 + 3) { $(this).get(0).id = e; } $(this).attr("href", "#"); if ((i >= b) && (i <= e)) { $(this).get(0).id = i; } if ($(this).text == result.CurrentPageIndex) { $(this).removeAttr("href"); } }); currentIndex = result.CurrentPageIndex; }
HTML页面代码:
<form runat="server" id="form1"> <div> <asp:Repeater ID="rptBooks" runat="server"> <HeaderTemplate> <table id="Books" width="90%" cellspacing="0" style="font-size:12px;"> <tr> <th> 书名 </th> <th> 作者 </th> <th> 类别 </th> <th width="30px"> </th> <th width="30px"> </th> </tr> <tbody id="Data"> <tr> </HeaderTemplate> <ItemTemplate> <td class="Title"> <%# Eval("Title") %> </td> <td class="Author"> <%# Eval("Author") %> </td> <td class="CategoryName"> <%# Eval("Categories.Name")%> </td> <td> <a href="#" id='<%# Eval("Id") %>' class="delBook">删除</a> </td> <td> <a href='BookDetail/<%# Eval("Id") %>' class="details">详细</a> </td> </ItemTemplate> <SeparatorTemplate> </tr><tr> </SeparatorTemplate> <FooterTemplate> </tr></tbody> <tr> <td colspan="3"> <cc1:PageBar ID="PageBar1" runat="server" PageCount="100" DisplayCount="5" PageIndex="1" /> <input type="text" id = "CI" /> </td> </td> </tr> </table> </FooterTemplate> </asp:Repeater> </div> </form>
Ajax请求地址返回的JSON数据:
{"Data":[{"Title":"C#.NET程序设计——国外计算机科学经典教材","CategoryName":".NET","Author":"布拉德利(Bradley,J.C.),米尔斯波(Millspaugh,A.C.) 著, 天宏工作室 译","Id":5392},{"Title":"C#2.0〔宝典)(附盘)","CategoryName":"C C++ VC VC++","Author":"张立 编著","Id":5027},{"Title":"C#2.0完全自学手册(附CD)","CategoryName":"C C++ VC VC++","Author":"张立 等编著","Id":5081},{"Title":"C#2005数据库编程经典教程","CategoryName":"C C++ VC VC++","Author":"(美)沃顿(Karli watton) 著,陈秋萍 译","Id":4983},{"Title":"C#程序设计教程——计算机基础课程系列教材","CategoryName":"C C++ VC VC++","Author":"郑阿奇,梁敬东 主编","Id":5127},{"Title":"C#程序员参考手册","CategoryName":"C C++ VC VC++","Author":"Grant Palmer 著,康博 译","Id":5132},{"Title":"C#和.NET核心技术——开发人员专业技术丛书","CategoryName":"C C++ VC VC++","Author":"(美)佩里(Perry,S.C.) 著,肖斌 等译","Id":5104},{"Title":"C#基础与实例教程(附CD-ROM光盘一张)","CategoryName":"C C++ VC VC++","Author":"郝春强 编著","Id":5071},{"Title":"C#软件项目开发全程剖析","CategoryName":"C C++ VC VC++","Author":"(德)侯姆,(德)克鲁格,(德)斯普达 著,薛兴涛,袁勤勇 译","Id":5034},{"Title":"C#设计模式——开发大师系列","CategoryName":"C C++ VC VC++","Author":"(美)麦斯科 著,颜炯 译","Id":4954}],"CurrentPageIndex":15,"PageCount":1074}
Jquery+JSon 无刷新分页实现代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@