jQuery + Json 无刷新分页

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

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

 

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

   <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>

   
   
   

   <%@ 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;
           }
       }
   
   }

源文件下载