Jquery+JSon實現的Asp.net無刷新分頁控件

控件類代碼:

 

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;

}

 

 

    <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>
                
<href="#" id='<%# Eval("Id") %>' class="delBook">刪除</a>
            
</td>
            
<td>
                
<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}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章