asp.net Mvc4 使用ajax结合分页插件实现无刷新分页
程序员文章站
2022-04-29 09:32:36
本文为在mvc4中使用ajax实现无刷新分页demo,记录一下。
解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术...
本文为在mvc4中使用ajax实现无刷新分页demo,记录一下。
解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术发送当前页码到后端控制器,后端控制器根据当前页码和设置的pagesize从数据库中取出对应页的数据。后端控制器处理完后利用partialview方法把数据返回到分部视图中,利用viewbag来返回总记录数和pagesize。ajax通过回调函数把控制器返回的分部视图内容加载到主视图中显示。
说明:分页具体的分页导航和样式使用了kkpager插件。
1、主视图(用于显示数据)代码
<script src="~/content/kkpager.js"></script> <table id="result" class="posts block"></table> <nav id="kkpager" class="posts block pagination"></nav> <script type="text/javascript"> $(function () { getarticlesdata(1); }); function getparameter(name) { var reg = new regexp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } function getarticlesdata(pageindex) { var ajaxurl = '/testdatadb/ajaxpaging?pageindex=' + pageindex; var ajaxtype = 'post'; var ajaxdatatype = 'text'; var sucfun = function (data, status) { if (data == null && status != "success") { alert("获取数据失败!"); return false; } else { $("#result").html(data); //定义分页样式 var totalcount = parseint('@viewbag.totalcount'); var pagesize = parseint('@viewbag.pagesize'); var pageno = getparameter('pno');//该参数为插件自带,不设置好,调用数据的时候当前页码会一直显示在第一页 if (!pageno) { pageno = 1; } var totalpages = totalcount % pagesize == 0 ? totalcount / pagesize : (parseint(totalcount / pagesize) + 1); kkpager.generpagehtml({ pno: pageno, total: totalpages, totalrecords: totalcount, mode: 'click', click: function (n) { this.selectpage(n);//插件自带的方法,手动调用某一页码 searchpage(n); return false; } }); } }; //ajax参数设置 var option = { url: ajaxurl, type: ajaxtype, datatype: ajaxdatatype, cache: false, //设置为 false 将不会从浏览器缓存中加载请求信息。 async: true, //(默认: true),所有请求均为异步请求。发送同步请求,请将此选项设置为 false。同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 timeout: 3600, //设置请求超时时间(毫秒)。此设置将覆盖全局设置。 error: function () { }, success: sucfun, beforesend: function () { } }; $.ajax(option); return false; } //ajax翻页 function searchpage(n) { getarticlesdata(n); } </script>
2、分部视图代码
@model ienumerable<test13.models.testdatadb> @{ viewbag.title = "ajaxfenbuview"; } <tr> <th> @html.displaynamefor(model => model.uid) </th> <th> @html.displaynamefor(model => model.uname) </th> <th> @html.displaynamefor(model => model.upwd) </th> <th> @html.displaynamefor(model => model.udata) </th> <th></th> </tr> @foreach (test13.models.testdatadb item in model) { <tr> <td>@item.uid</td> <td>@item.uname</td> <td>@item.upwd</td> <td>@item.udata</td> <td> @html.actionlink("编辑", "edit", new { id=item.id }) | @html.actionlink("查看详细", "details", new { id=item.id }) | @html.actionlink("删除", "delete", new { id=item.id }) </td> </tr> }
3、控制器获取数据代码
private readonly int pagesize =1; public actionresult ajaxfenye() { viewbag.pagesize = pagesize; viewbag.totalcount = db.testdatadbs.count(); return view(); } public actionresult ajaxpaging(int pageindex = 1) { var persons = (from p in db.testdatadbs orderby p.id descending select p).skip((pageindex - 1) * pagesize).take(pagesize); return partialview("ajaxfenbuview", persons.tolist()); }
最后上个效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。