Jquery+JSon 无刷新分页实现代码

  控件类代码:

  

复制代码 代码如下:

  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}