[转]jQuery AJAX pagination plugin with ASP.NET Server Side

本文转自：http://do-web.com/jpaging/usage

How does it work?

1. In order to implement the plugin, you need to insert inside the head tag of your document the last jQuery file, jquery.jpaging.0.1.min.js and jpaging.css.

1. <scripttype="text/javascript"language="javascript"src="js/jquery-1.5.2.min.js"></script>    
2. <scripttype="text/javascript"language="javascript"src="js/jquery.jpaging.0.1.min.js"></script>
3. <linkhref="css/jpaging.css"rel="stylesheet"type="text/css"/>

 

 

 

 

2. Next you need to insert your html markup into the body tag.

 

1. <divid="paging"></div>

 

 

3. Create your 'get' function that will select items from database.

1. function get_data(start_index, end_index){
3.     $.ajax({
4.         type:"POST",
5.         url:'serverpage.aspx',            
6.         data:{start_index: start_index,
7.                end_index: end_index},
8.         success:function(data)
9.         {                  
10.             //create your html
11.         }
12.     });                        
13. }

 

 

 

 

 

 

 

 

 

 

4. Get the total number of items from database and call jPaging plugin.

1. $.ajax({type:"POST",
2.         url:'serverpage.aspx',
3.         success:function(total)
4.         {  
5.                 $("#paging").jpaging({
6.                     all_items_num: total,
7.                     callback: get_data
8.             });
9.         }
10. });

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Example

HTML murkup:

1. <divid="paging">
2.     <imgsrc=preloader.gif" border="0" alt="" title=""/>
3. </div>
5. <divid="demo_tbl">
6.     <imgsrc=preloader.gif" border="0" alt="" title=""/>
7. </div>

 

 

 

 

 

 

JavaScript:

1. $("document").ready(function()
2. {
3.     var items_on_page =5;
4.     var pages_step =5;
5.    
6.     function get_data(start_index, end_index){
7.    
8.         $.ajax({
9.             type:"POST",
10.             url:"plugins.ashx",          
11.             data:{start_index: start_index,
12.                    end_index: end_index,
13.                    type:"get"},
14.             success:function(html)
15.             {                
16.                 $("#demo_tbl").html(html);
17.             }
18.         });          
19.     }
20.    
21.     get_data(1, items_on_page);
22.    
23.     $.ajax({
24.         type:"POST",
25.         url:"plugins.ashx",          
26.         data:{type:"total"},
27.         success:function(total)
28.         {  
29.             $("#paging").jpaging({
30.                 all_items_num: total,
31.                 callback: get_data,
32.                 items_on_page: items_on_page,
33.                 pages_step: pages_step
34.             });
35.         }
36.     });
37.        
38.    
39.    
40. });

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Handler class example:

1. publicclassPluginsHandler:IHttpHandler{
2.    
3.     privateDataBase db;
4.     private string type;
5.    
6.     publicvoidProcessRequest(HttpContext context)
7.     {          
8.         context.Response.ContentType="text/plain";          
9.         this.db =newDataBase();
10.         try{
11.        
12.             this.type = context.Request.Form["type"];
13.            
14.             if(this.type !=""){
15.                
16.                 switch(this.type){
17.                     case"get":{
18.                         context.Response.Write(this.Get(context));
19.                         break;
20.                     }
21.                     case"total":{
22.                         context.Response.Write(this.db.CountPlugins());
23.                         break;
24.                     }
25.                 }
26.             }
27.            
28.         }
29.         catch(Exception ex){
30.             context.Response.Write(ex.Message.ToString()+" "+ ex.StackTrace);  
31.         }
32.     }
33.    
34.     publicboolIsReusable
35.     {
36.         get {returntrue;}
37.     }              
38.        
39.     public string Get(HttpContext context){
40.    
41.         StringBuilder html =newStringBuilder();
42.         int start_index_int, end_index_int;
43.         bool start_index_num, end_index_num;
44.         string start_index = context.Request.Form["start_index"];
45.         string end_index = context.Request.Form["end_index"];
46.         int count =0;
47.                    
48.         start_index_num =Int32.TryParse(start_index, out start_index_int);
49.         end_index_num =Int32.TryParse(end_index, out end_index_int);
50.        
51.         if(start_index_num && end_index_num){
52.             List plugins =this.db.GetPlugins(start_index_int, end_index_int);          
53.            
54.             html.AppendLine("<table border='1' cellspacing='0' cellpadding='0' align='center'>");
55.             html.AppendLine("<th width='33%'>Plugin title</th>");
56.             html.AppendLine("<th width='33%'>Description</th>");
57.             html.AppendLine("<th width='33%'>Website</th>");
58.            
59.             foreach(Plugin plugin in plugins){
60.                 html.AppendLine(this.GetRow(plugin, count));
61.                 count++;
62.             }
63.             html.AppendLine("</table>");
64.         }
65.        
66.         return html.ToString();
67.     }  
69.    
70.     public string GetRow(Plugin plugin,int count){
71.         StringBuilder html =newStringBuilder();
72.         string class_name ="odd";
73.        
74.         if(count %2==0){
75.             class_name ="even";
76.         }
77.        
78.         html.AppendLine("<tr class='"+ class_name +"'>");
79.             html.AppendLine("<td>"+ plugin.Title+"</td>");
80.             html.AppendLine("<td>"+ plugin.Description+"</td>");
81.             html.AppendLine("<td>"+ plugin.Website+"</td>");
82.         html.AppendLine("</tr>");
83.        
84.         return html.ToString();  
85.     }
86.  
87. }