控件类代码： 复制代码 代码如下: 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 = "rn<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}

　　推荐阅读

　　JS 文件大小判断的实现代码

方法一，利用ActiveX控件实现： 复制代码 代码如下: <script type="text/javascript"> function getFileSize(filePath) { var fso = new ActiveXObject("Scripting.FileSystemObject"); alert("文件大小为："+fso.>>>详细阅读

本文标题：Jquery+JSon 无刷新分页实现代码

地址：http://www.17bianji.com/kaifa2/JS/26701.html

 1/2    1