利用Linq + Jquery + Ajax 异步分页的实现

转载

mob604756fca9f3 2014-04-24 15:44:00

文章标签 json ajax 数据批量删除 sql 文章分类 代码人生

在Web显示的时候我们经常会遇到分页显示，而网上的分页方法甚多，但都太过于消耗带宽，所以我想到了用Ajax来分页，利用返回的Json来处理返回的数据，

大大简化了带宽的压力。

先说下思路，无非就是异步执行ajax 把新列表所需要的数据用json格式返回来，然后把原来的列表Remove掉，让新列表Show。

上前台Html代码：

<asp:Repeater ID="Repeater1" runat="server">

<tr>

</div></td>

</tr>

</HeaderTemplate>

<input class ="check_select" type="checkbox" name="checkbox2" title =<%#Eval("Id")%> value="checkbox" />

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

</tr>

</ItemTemplate>

</asp:Repeater>

</table>

<tr>

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

<tr>

<td width="100"><div align="center"><span class="STYLE1">转到第

<asp:DropDownList ID="Drop" runat="server">

</asp:DropDownList>

页 </span></div></td>

</tr>

</table>

</td>

</tr>

</table>

好了，初步的html页面布局已经做完了，下来我们该做页面和服务器的交互了

页面引入Jquery，为上一页，下一页，首页，尾页，增加Click事件

利用Linq + Jquery + Ajax 异步分页的实现_数据

设置他们的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);

}

好了，到此，大功告成，后续会把批量删除（批量删除后的页面变化等等加入），

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：Asp.Net中用JS中操作cookie的方法

下一篇：IE6下div遮盖select的最优解决方案

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

利用Linq + Jquery + Ajax 异步分页的实现

利用Linq + Jquery + Ajax 异步分页的实现

51CTO博客