• [转]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){
    2.     $.ajax({
    3.         type:"POST",
    4.         url:'serverpage.aspx',            
    5.         data:{start_index: start_index,
    6.                end_index: end_index},
    7.         success:function(data)
    8.         {                  
    9.             //create your html
    10.         }
    11.     });                        
    12. }

     

     

     

     

     

     

     

     

     

     

    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>
    4. <divid="demo_tbl">
    5.     <imgsrc=preloader.gif" border="0" alt="" title=""/>
    6. </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.     }  
    68.    
    69.     public string GetRow(Plugin plugin,int count){
    70.         StringBuilder html =newStringBuilder();
    71.         string class_name ="odd";
    72.        
    73.         if(count %2==0){
    74.             class_name ="even";
    75.         }
    76.        
    77.         html.AppendLine("<tr class='"+ class_name +"'>");
    78.             html.AppendLine("<td>"+ plugin.Title+"</td>");
    79.             html.AppendLine("<td>"+ plugin.Description+"</td>");
    80.             html.AppendLine("<td>"+ plugin.Website+"</td>");
    81.         html.AppendLine("</tr>");
    82.        
    83.         return html.ToString();  
    84.     }
    85.  
    86. }
  • 相关阅读:
    高性能css动画
    关于thinkphp验证码的那些事
    DOM对象的属性
    关于data属性的一些常见的处理方式
    webstorm快捷键整理
    javascript模块化编程
    2016年5月30日上午(传智Bootstrap笔记六(图片样式))
    Bootstrap列排序
    2016年5月29日晚上(传智Bootstrap笔记五(表单2))
    2016年5月29日晚上(传智Bootstrap笔记四(栅格系统 ))
  • 原文地址:https://www.cnblogs.com/freeliver54/p/3622460.html
Copyright © 2020-2023  润新知