• [转]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. }
  • 相关阅读:
    25.清除浮动的方法
    23、flex响应式布局原理
    22.垂直上下居中的方法
    web自动化测试(十二)----类似日期选择框
    web自动化测试(十一)------滚动条
    web自动化测试(九)---下拉列表
    web自动化测试(八)---鼠标操作
    web自动化测试(五)——xpath定位
    【C++】《C++ Primer 》第十五章
    【C++】《C++ Primer 》第十四章
  • 原文地址:https://www.cnblogs.com/freeliver54/p/3622460.html
Copyright © 2020-2023  润新知