Implementation Code of Jquery + JSon without refreshing Paging

Control Code:
Copy codeThe Code is as follows:
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 = 'page' id = \" {0} \ "> {1} </a>", pageIndex, text );
}
Return string. format ("<a class = \" pageA \ "title = 'page' href = \" # \ "id = \" {0} \ ">{1} </> ", 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 resource file code:
Copy codeThe Code is as follows:
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 page code:
Copy codeThe Code is as follows:
<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>
Title
</Th>
<Th>
Author
</Th>
<Th>
Category
</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"> Delete </a>
</Td>
<Td>
<A href = 'bookdetail/<% # Eval ("Id") %> 'class = "details"> details </a>
</Td>
</ItemTemplate>
<SeparatorTemplate>
</Tr> <tr>
</SeparatorTemplate>
<FooterTemplate>
</Tr> </tbody>
<Tr>
<Td colspan = "3">
<PC3: 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>

JSON data returned by the Ajax request address:
Copy codeThe Code is as follows:
{"Data": [{"Title": "C #. NET Programming-a classic textbook for foreign computer science "," CategoryName ":". NET "," Author ":" Bradley (Bradley, J. C .), millspaugh,. C .) translated by Tianhong Studio "," Id ": 5392 },{" Title ":" C #2.0 (baodian) (attached disk) "," CategoryName ": "C ++ VC ++", "Author": "Zhang Li compiled", "Id": 5027 },{ "Title ": "C #2.0 complete self-taught Manual (with CD)", "CategoryName": "C ++ VC ++", "Author": "Edited by Zhang Li ", "Id": 5081 },{ "Title": "C #2005 database programming classic tutorial", "CategoryName": "C ++ VC ++ ", "Author": "Karli watton, translated by Chen Qiuping", "Id": 4983 },{ "Title ": "C # Programming Tutorial-Computer Basics course series", "CategoryName": "C ++ VC ++", "Author": "Zheng Achi, editor Liang Jingdong "," Id ": 5127 },{" Title ":" C # programmer Reference Manual "," CategoryName ":" C ++ VC ++ ", "Author": "Grant Palmer, conbo translation", "Id": 5132 },{ "Title": "C # And. NET core technology-Professional Technical Series for developers "," CategoryName ":" C ++ VC ++ "," Author ":" (US) Perry, S. C .) translated by Xiao bin, "Id": 5104 },{ "Title": "C # basic and instance tutorial (with a CD-ROM disc)", "CategoryName ": "C ++ VC ++", "Author": "Edited by Hao chunqiang", "Id": 5071 },{ "Title ": "C # Full-Process Analysis of Software Project Development", "CategoryName": "C ++ VC ++", "Author": "(de) houm, (de) Kruse, (DE) Spada, Xue xingtao, Yuan qinyong, translated "," Id ": 5034 },{" Title ":" C # design model-Master Development Series ", "CategoryName": "C ++ VC ++", "Author": "(US) Moco, translated by Yan", "Id": 4954}], "CurrentPageIndex": 15, "PageCount": 1074}