在Web显示的时候我们经常会遇到分页显示，而网上的分页方法甚多，但都太过于消耗带宽，所以我想到了用Ajax来分页，利用返回的Json来处理返回的数据，
大大简化了带宽的压力。
先说下思路，无非就是异步执行ajax 把新列表所需要的数据用json格式返回来，然后把原来的列表Remove掉，让新列表Show。
上前台Html代码：
<!--一个table 里面是repeater 当然了你也可以用<UL>那样效率更高-->
<table width="100%" border="0" cellpadding="0" id = "newslist" cellspacing="1" bgcolor="b5d6e6">
<asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <tr> <td width="15%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"> <a id="quan">全选</a> <a id="fan">反选</a> </div></td> <td width="12%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">接收号码</span></div></td> <td width="14%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">发送时间</span></div></td> <td width="18%" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">邮件地址</span></div></td> <td width="23%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">内容</span></div></td> <td width="15%" height="22" background="images/bg.gif" bgcolor="#FFFFFF" class="STYLE1"><div align="center">基本操作</div></td> </tr> </HeaderTemplate> <ItemTemplate> <tr class="item"> <td height="20" bgcolor="#FFFFFF"><div align="center"> <input class ="check_select" type="checkbox" name="checkbox2" title =<%#Eval("Id")%> value="checkbox" /> </div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1"><%#Eval("Name")%></span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">2007-11-16 15:00:20 </span></div></td> <td bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">tiezhu0902@163.com</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">南京科技股份有限公司…</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE4"><img src="images/edt.gif" width="16" height="16" />编辑 <img src="images/del.gif" width="16" height="16" />删除</span></div></td> </tr> </ItemTemplate> </asp:Repeater> </table><!--一个table 里面是上一页，下一页，当前页面信息等等……当然了你也可以用<UL>那样效率更高-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> <td class="STYLE4"><a id="delete" style =" cursor :hand;">批量删除</a></td>
<td class="STYLE4">共有<asp:Label ID="Count" runat="server" Text=""></asp:Label>条数据， 每页显示<asp:Label ID="ItemCount" runat="server" Text=""></asp:Label>条， 当前<asp:Label ID="index" runat="server" Text=""></asp:Label> / <asp:Label ID="PageCount" runat="server" Text=""></asp:Label> 页</td>
<td><table border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <td width="40"><img src="images/first.gif" class="page" title ="first" width="37" height="15" /></td> <td width="45"><img src="images/back.gif" class="page" title ="back" width="43" height="15" /></td> <td width="45"><img src="images/next.gif" class="page" title ="next" width="43" height="15" /></td> <td width="40"><img src="images/last.gif" class="page" title ="last" width="37" height="15" /></td> <td width="100"><div align="center"><span class="STYLE1">转到第 <asp:DropDownList ID="Drop" runat="server"> </asp:DropDownList> 页 </span></div></td> <td width="40"><img class="page" title = "go" src="images/go.gif" width="37" height="15" /></td> </tr> </table> </td> </tr> </table>好了，初步的html页面布局已经做完了，下来我们该做页面和服务器的交互了
页面引入Jquery，为上一页，下一页，首页，尾页，增加Click事件
设置他们的Class = page 以便于给他们增加Click
$(".page").click(function () {
var type = $(this).attr("title"); var thisindex = $("#index").text(); //获取当前页码 switch (type) { case 'first': { pageindex = 1; PageIndex(1); //Ajax 回传函数 return; } case 'back': { if (thisindex == 1) { alert("当前已经是第一页！"); } else { pageindex = parseInt(thisindex) - 1; PageIndex(pageindex); } return; } case 'next': { if (thisindex == $("#Drop").children().length) { alert("当前已经是最后页！"); } else { pageindex = parseInt(thisindex) + 1; PageIndex(pageindex); } return; } case 'last': { var max = $("#Drop").children().length; pageindex = max; PageIndex(max); return; } case 'go': { var _go = $("#Drop").val(); pageindex = _go; PageIndex(_go); return; } }})
下面的代码在是Ajax的回传封装，切记在$(function(){ ....})之外
var pageindex;
function PageIndex(index) { $.ajax({ type: "Post", //回传格式 url: "WebForm1.aspx", //回传页面 data: { "id": index }, //回传参数表示请求的是第几页 cache: false, //禁止使用浏览器缓存 //dataType: "json", success: function (data) { var json = eval(data); //把返回来的数据 ｊｓｏｎ var str = ""; for (var i = 0; i < json.items.length - 1; i++) { str = str + "<tr class='item' ><td height='20' bgcolor='#FFFFFF'><div align='center'><input class ='check_select' type='checkbox' name='checkbox2' title =" + json.items[i].id.toString() + " value='checkbox' /></div></td>"; str = str + "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>" + json.items[i].name + "</span></div></td><td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>2007-11-16 15:00:20 </span></div></td>"; str = str + "<td bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>tiezhu0902@163.com</span></div></td><td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>南京科技股份有限公司…</span></div></td>"; str = str + "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE4'><img src='images/edt.gif' width='16' height='16' />编辑 <img src='images/del.gif' width='16' height='16' />删除</span></div></td></tr>"; } $("#index").text(pageindex); //设置当前的页码 $(".item").remove(); //移除原有的列表 $("#newslist").append(str); //显示返回的列表 }, error: function () { alert("服务错误"); } }) }下面才Ｃ＃代码了：
void data(int id,bool b)
{ int listcount = 7; //设置页面的显示数量 LinqToSqlDataContext ds = new LinqToSqlDataContext(); var q = (from a in ds.Admin select a).Skip((id-1) * listcount).Take(listcount); //获取请求页面的列表 if (!b) //如果是页面初始加载 默认显示 { Repeater1.DataSource = q; DataBind(); int count = (from a in ds.Admin select a).ToList().Count; this.Count.Text = count.ToString(); count = count / listcount + (count % listcount > 0 ? 1 : 0); this.ItemCount.Text = listcount.ToString(); this.index.Text = "1"; this.PageCount.Text = count.ToString(); for (int i = 0; i < count; i++) { Drop.Items.Add((i + 1).ToString()); } } else { string str = "({items:["; foreach (var a in q) { str += "{'id':'" + a.Id + "'"; str += ",'name':'" + a.Name+"'"; str += "},"; } str += "]})"; Response.Write(str); Response.End(); } } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { data(1,false); } PageIndex(); } void PageIndex() { if (Request["id"] != null) { int id = int.Parse(Request["id"].ToString()); data(id,true); } }好了，到此，大功告成，后续会把批量删除（批量删除后的页面变化等等加入），