MVC3.0 JQuery异步加载分页数据

我的广告单元，有空点一下哦，谢谢！

　　案例实现实现功能，举个例子，腾讯的qq空间好友动态；谷歌的图片搜索下一页；校内的好友动态；微博的动态等等，都是采用了单页异步追加分页的方式实现数据分页加载的。随着平板电脑的普及，这种技术也更加切合用户的体验，虽然技术上不算复杂，但是确实提高了用户体验。当然这中方式也不是所有地方都能用的，比如数据太多，超过1000行，那么就不建议采用这种方式了。

　　


　　那么我这里简单实现了这个功能，跟大家分享下。

　　①：首先数据库准备好分页的存储过程，例如：P_FindByPage @page;

　　②：看页面源码　　　　

@model System.Data.DataTable
@section head{
<script type="text/javascript">
var page=0;//当前页号
function FindNext() {//AJAX请求
page = page +1;
var newtr ='<tr><th colspan="11">==第'+(page+1)+'页内容==</th></tr>';//增加分页码字
$("#T_AllSKC").append(newtr);//将分页码字添加到数据Table
$("#T_Reflash").html("<img src='/content/images/load.gif' />");//div显示刷新图片
$.post("/Home/AllSKCOrderByPage/", "page="+ page, function (data) {//请求数据
$("#T_AllSKC").append(data);//像原Table追加数据
$("#T_Reflash").html("");//清空显示刷新的div
if (data.replace(/[^<tr>]/g, '').length !=4300) {//这里判断是不是最后一页，方法很多
$("#btnShow").css("display", "none");//如果是最后一页隐藏按钮
warn ='<tr><th colspan="11">已经是最后一页了！！！</th></tr>';
$("#T_AllSKC").append(warn);
}
}, "text"
);
}
</script>
}

<hr />
<table id="T_AllSKC" align="center" width="800px">
<tr><th>...................</th></tr>
@foreach (System.Data.DataRow dr in Model.Rows)
{
<tr><td>.................</td></tr>
}
</table>
<div id="T_Reflash"></div>
<br />
<button id="btnShow" class="cupid-blue" onclick="FindNext()">显示更多（ShowMore）</button>

　　

　　③：Controller内容

　　

//查看第一页，我这里数据存在脏读，所以分为两个方法，第一页，和其他页面，其实完全可以写成一个方法的
[OutputCache(Duration =300)]
public ActionResult AllSKCOrder()
{
if (HttpContext.Session["currentUser"] ==null)
{
return RedirectToAction("Index/");
}
return View(DbHelperSQL.ALLSKCOrder("P_AllSKCOrder", 0));//执行过程
}
//查看其他页面，这里你返回JSON还是String，还是Partview自己控制了，我这里直接组合好tr，前台直接追加了，这个操作亦可以在前台操作
[OutputCache(Duration =300)]
publicstring AllSKCOrderByPage(int page)
{
page = page *50;
if (Request.IsAjaxRequest())
{
DataTable dt = DbHelperSQL.ALLSKCOrder("P_AllSKCOrder", page);
StringBuilder sb =new StringBuilder();
foreach (DataRow dr in dt.Rows)
{
sb.Append(string.Format("<tr><td>{0}</td></tr>",dr["id"].ToString()));
}
return sb.ToString();
}
elsereturnnull;
}

　　

　　好了就这么简单，当然还有很多其他的方法，而且可以继续扩展，根据滚动条的位置自动加载数据。

　　有图有真相：