源码：https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx
原理：点页码的时候，我们不再去访问这个页面，而是去访问一般处理程序，把当前页，每页显示的大小，传过去，然后我们去获取数据，然后返回到前台，用js进行处理。（原理理解了，你会发现说到无刷新差不多都是这样的套路）
提问：我们什么时候去访问处理程序，或者说在那里进行这个操作
这个插件有个回调函数，并且这个回调函数里面自带一个当前页的参数，那还等什么，就是它了
前面都是一样的：
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="../CSS/TableCSS.css" rel="stylesheet" /> <link href="../CSS/pagination.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <div class="tableDiv"> <asp:Repeater ID="repList" runat="server"> <HeaderTemplate> <table> <tr> <th>序号</th> <th>名字</th> <th>父级ID</th> <th>显示</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td><%# RowIndex++ %></td> <td><%# Eval("Name")%></td> <td><%# Eval("Pid") %></td> <td><%# Eval("LevalNum") %></td> </tr> </ItemTemplate> </asp:Repeater> </div> <div class="pagelistbody boxsizing"> <div class="pagebox"> <div class="page flickr"> </div> </div> <div class="pagemsg"> <p>共<span><%= pcount %></span>条数据，共<span><%=Math.Ceiling(decimal.Parse(pcount.ToString())/pagesize) %></span>页，当前第<span><%= page+1 %></span>页</p> </div> </div> <script src="../JS/jquery-1.11.0.min.js"></script> <script src="../JS/jquery.tableui.js"></script> <script src="../JS/jquery.pagination.js"></script>
js：
<script> $(function () { $("table").tableUI(); //分页插件方法 $(".page").pagination(<%= pcount %>, { num_edge_entries:1, //边缘页数 num_display_entries:4, //主体页数 callback:pageCallback, //回调函数 items_per_page:<%= pagesize%>, //每页显示条数 current_page:<%= page%>, //当前页 prev_text: "上一页", next_text: "下一页" //分页链接 strUrl是需要传递的参数 get提交 }); //回调函数 function pageCallback(page_id,jq){ //page_id 为 当前页码-1 注意这个page_id，你点第一页它是0，你点第3页它是2 需要小心了 $.ajax({ type:"Post", url:"FenYe.ashx", dataType:"json", data:"page="+page_id+"&pageSize="+<%=pagesize %>, async:true, success:function(data){ $("table tr:gt(0)").remove(); var GetData=eval(data); $.each(GetData,function(i,item){ var dd="<tr"; i=++i; if (i%2!=0) { dd+=" class="odd""; }else { dd+=" class="even""; } dd+="><td>"+i+"</td><td>"+item.Name+"</td><td>"+item.Pid+"</td><td>"+item.LevalNum+"</td></tr>"; // $("table").append("<tr class="even"><td>"+(++i)+"</td><td>"+item.Name+"</td><td>"+item.Pid+"</td><td>"+item.LevalNum+"</td></tr>"); $("table").append(dd); }) } }) return true; //返回真就刷新，返回假不会刷新 } }); </script>
后台跟刷新一样的
public partial class FenYeAjax : System.Web.UI.Page { public int RowIndex = 1; public int page = 0; public int pcount = 0; public int pagesize = 2; public string strUrl = ""; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { pcount = new FunctionDemo.BLL.Category().GetRecordCount("1=1"); repList.DataSource = new FunctionDemo.BLL.Category().GetPageList("1=1", pagesize, page); repList.DataBind(); } } }
我们的一般处理程序
需要引用：
需要引用，这个外部的
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; int page = context.Request.Form["page"] == null ? 0 : Convert.ToInt32(context.Request.Form["page"].ToString()); int pageSize = Convert.ToInt32(context.Request.Form["pageSize"]); DataTable dt = new FunctionDemo.BLL.Category().GetPageList("1=1", pageSize, page).Tables[0]; context.Response.Write(JsonConvert.SerializeObject(dt)); }
效果：
这个过程是不刷新的。