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> ",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)","Author":"张立　等编著","Id":5081},{"Title":"C#2005数据库编程经典教程","Author":"（美）沃顿（Karli watton） 著，陈秋萍 译","Id":4983},{"Title":"C#程序设计教程――计算机基础课程系列教材","Author":"郑阿奇，梁敬东 主编","Id":5127},{"Title":"C#程序员参考手册","Author":"Grant Palmer 著，康博 译","Id":5132},{"Title":"C#和.NET核心技术――开发人员专业技术丛书","Author":"（美）佩里（Perry,S.C.） 著，肖斌 等译","Id":5104},{"Title":"C#基础与实例教程（附CD-ROM光盘一张）","Author":"郝春强 编著","Id":5071},{"Title":"C#软件项目开发全程剖析","Author":"（德）侯姆，（德）克鲁格，（德）斯普达 著，薛兴涛，袁勤勇 译","Id":5034},{"Title":"C#设计模式――开发大师系列","Author":"（美）麦斯科 著，颜炯 译","Id":4954}],"CurrentPageIndex":15,"PageCount":1074}