Jquery+JSon 無刷新分頁實現(xiàn)代碼

更新時間：2010年04月01日 23:21:07 作者：

基于jquery+json格式文件的無刷新分頁實現(xiàn)代碼，需要的朋友可以參考下。

控件類代碼：

 
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>&nbsp;", pageIndex, text); 
} 
return string.Format("<a class=\"pageA\" title='頁' href=\"#\" id=\"{0}\">{1}</a>&nbsp;", 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數(shù)據(jù)：

復制代碼代碼如下:

 
{"Data":[{"Title":"C#.NET程序設計——國外計算機科學經(jīng)典教材","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數(shù)據(jù)庫編程經(jīng)典教程","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核心技術——開發(fā)人員專業(yè)技術叢書","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#軟件項目開發(fā)全程剖析","CategoryName":"C C++ VC VC++","Author":"（德）侯姆，（德）克魯格，（德）斯普達 著，薛興濤，袁勤勇 譯","Id":5034},{"Title":"C#設計模式——開發(fā)大師系列","CategoryName":"C C++ VC VC++","Author":"（美）麥斯科 著，顏炯 譯","Id":4954}],"CurrentPageIndex":15,"PageCount":1074} 

您可能感興趣的文章: