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;
        }

　　

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

　　有图有真相：