jQuery + Json 无刷新分页

网上有很多关于jQuery+Json无刷新分页的，各种各样的，大部分都是用的 Pagination 分页插件

网上下载的案例，经过自己亲自试用后，抽出最核心的部分，加了详细注释，希望对你有所帮助。

 

1. 使用JQuery paginati抽出最核心的部分，加了详细注释on 分页
2. 存储过程处理包括sqlsSrver2000/sqlsSrver2005
3. ashx后台
4. 包括2个jsonHelper.cs和sqlHelper.cs处理类
   前台Ajax

   < script type = " text/javascript "   >        
         
          $().ready( function () {
                InitData( 0 );
                  $( " #pageTheme " ).change( function (){
                   $( " #Pagination " ).attr( ' class ' ,$( this ).val());
               });
           });
            // 回调函数
              function  pageselectCallback(page_id) {          
               InitData(page_id);
           }
            // 初始数据
            function  InitData(pageindx) {
                var  tbody  =   "" ;
               $.ajax({
                   type:  " POST " ,
                   dataType:  " json " ,
                   url:  " Handler.ashx " ,
                   data:  " p= "   +  (pageindx  +   1 ),             
                   success:  function  (json) {
                       $( " #productTable tr:gt(0) " ).remove(); // 移除第一个以后的所有否则会累加
                        var  productData  =  json.table;
                       $.each(productData,  function  (i, n) {
                            var  trs  =   "" ;
                           trs  +=   " <tr><td> "   +  n.orderid  +   " </td><td> "   +  n.customerid  +   " </td><td> "   +  n.shipname  +   " </td><td> "   +  n.shipcity  +   " </td></tr> " ;
                           tbody  +=  trs;
                          
                       })
                        $( " #productTable " ).append(tbody);  // 往其中增加内容
                       
                   }
               });
   
                // 分页Jquery
               $( " #Pagination " ).pagination( <%= pagecount  %> , {
                       callback: pageselectCallback,
                       prev_text:  ' « Previous ' ,
                       next_text:  ' Next » ' ,
                       items_per_page: 20 ,
                       num_display_entries: 6 ,
                       current_page:pageindx,
                       num_edge_entries: 2
                   });
           }
          
        < / script>
   
   
   
   Ajax提交Handler.ashx处理 

   <% @ WebHandler Language = " C# "  Class = " Handler "   %>
   
   using  System;
   using  System.Web;
   using  System.Data;
   public   class  Handler : IHttpHandler {
       
        public   void  ProcessRequest (HttpContext context) {
            // context.Response.Buffer = true;
            // context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
            // context.Response.AddHeader("pragma", "no-cache");
            // context.Response.AddHeader("cache-control", "");
            // context.Response.CacheControl = "no-cache";
           context.Response.ContentType  =   " text/plain " ;
   
            int  pageindex;
            int .TryParse(context.Request[ " p " ],  out  pageindex);       
   
            if  (pageindex  ==   0 )
               pageindex  =   1 ;
           
                     
           DataTable dt  =  sqlHelper.getTablePager2005( " orderid,customerid,shipname,shipcity " ,  " orders " ,  "" ,  " orderid desc " , pageindex,  20 );
            string  jsonData  =  jsonHelper.DateTableToJson(dt,  " table " );  // 转换成json
           context.Response.Write(jsonData);  
       }
    
        public   bool  IsReusable {
            get  {
                return   false ;
           }
       }
   
   }

源文件下载