利用Linq + Jquery + Ajax 异步分页的实现
在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);
}
}
好了，到此，大功告成，后续会把批量删除（批量删除后的页面变化等等加入），
