MVC3.0 JQuery异步加载分页数据
2011-07-29 17:12
661 查看
我的广告单元,有空点一下哦,谢谢!
案例实现实现功能,举个例子,腾讯的qq空间好友动态;谷歌的图片搜索下一页;校内的好友动态;微博的动态等等,都是采用了单页异步追加分页的方式实现数据分页加载的。随着平板电脑的普及,这种技术也更加切合用户的体验,虽然技术上不算复杂,但是确实提高了用户体验。当然这中方式也不是所有地方都能用的,比如数据太多,超过1000行,那么就不建议采用这种方式了。
那么我这里简单实现了这个功能,跟大家分享下。
①:首先数据库准备好分页的存储过程,例如:P_FindByPage @page;
②:看页面源码
③:Controller内容
好了就这么简单,当然还有很多其他的方法,而且可以继续扩展,根据滚动条的位置自动加载数据。
有图有真相:
案例实现实现功能,举个例子,腾讯的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; }
好了就这么简单,当然还有很多其他的方法,而且可以继续扩展,根据滚动条的位置自动加载数据。
有图有真相:
相关文章推荐
- SpringMVC+Jquery -页面异步加载数据
- struts+spring+hibernate用jquery实现数据分页异步加载,页面不刷新
- Jquery easy ui的分页,table,数据加载
- asp.net 使用js分页实现异步加载数据
- jQuery异步加载数据添加事件
- JS插件(2)--- jquery.autocomplete 异步加载数据完整版
- Jquery zTree结合Asp.net实现异步加载数据
- jQuery异步加载数据并添加事件示例
- 我要学ASP.NET MVC 3.0(十六): MVC 3.0 实例系列之表格数据的分页
- jQuery+Ajax+PHP实现异步分页数据显示--js可参考
- zTree -- jQuery 树插件(后台异步获取数据-asp.net mvc模式下)
- asp.net 使用js分页,异步加载数据
- jquery使用EasyUI Tree异步加载JSON数据(生成树)
- 自写的jQuery异步加载数据添加事件
- Jquery Datatables 异步分页加载数据
- 将jQuery Pagination分页插件用于不使用AJAX加载数据的页面
- [转]MVC3.0 Razor实现Ajax数据分页
- ASP.NET MVC 3.0(十六): MVC 3.0 实例系列之表格数据的分页
- Jquery前端分页插件pagination同步加载和异步加载
- jquery 异步加载数据引起的js注入解决办法