《1》
这个分页代码其实是单独的。他会默认调用Home控制器下的Index视图,然后传递一个page参数。
Inde视图
@{ ViewBag.Title = "Index"; } <script src="~/Scripts/jquery-1.8.2.js"></script> <style> body { padding: 0; margin: 0; font: normal 14px/25px "\5FAE\8F6F\96C5\9ED1"; color: #333; } input { margin: 0; padding: 0; } a { color: #333; text-decoration: none; } .page { margin-top: 10%; line-height: 30px; text-align: center; } .page a { margin: 0 3px; display: inline-block; padding: 0 10px; border: 1px solid #CCC; } .page a:hover { background: #F5F5F5; } .page a.on { background: #3BA2E3; border-color: #3BA2E3; color: #FFF; } .page a.page_turn:hover { background: #3BA2E3; border-color: #3BA2E3; color: #FFF; Box-shadow: 1px 1px 3px #CCC; } .page input { width: 30px; height: 28px; line-height: 28px; margin-right: 8px; padding-left: 5px; border: 1px solid #CCC; vertical-align: top; } .page input:hover { border-color: #3BA2E3; } </style> <table> <tr><th>Id</th><th>UserName</th><th>Password</th><th>Email</th><th>Errors</th><th>Session</th></tr> @foreach (var a in ViewBag.Data) { <tr><td>@a.Id</td><td>@a.UserName</td><td>@a.Password</td><td>@a.Email</td><td>@a.Errors</td><td>@a.Session</td></tr> } </table> <div id="page" class="page"></div> <script> var Page = 1,MaxPage = 20; //当前页为第一页,最大页设为20 locat() if (MaxPage != "" && MaxPage > 1) { document.getElementById("page").innerHTML = Pagehtml() document.getElementById("page_btn").onclick = function () { //如果用户点击了GO var _page = document.getElementById("page_text").value //获取到用户要跳转到”第几页“的值 var r = /^[0-9]*[1-9][0-9]*$/; //正整数 if (_page != "" && r.test(_page)) { if (MaxPage < _page) { _page = MaxPage } this.href = "/Home/Index?page=" + _page } } document.getElementById("page_text").onkeyup = function (event) { if (event == "undefined") { event = window.event; } if (event.keyCode == 13) { document.getElementById("page_btn").click(); return false; } } } function locat() { var url = window.location.search; //接收地址中传递的参数并产生响应 if (url.indexOf("?") != -1) { var str = url.substr(1) strs = str.split("&"); for (i = 0; i < strs.length; i++) { if ([strs[i].split("=")[0]] == 'page') Page = unescape(strs[i].split("=")[1]); } } } function Pagehtml() {//分页代码 var PageStr = "",jj = ""; Page = parseInt(Page); var xPage = Page - 2,dPage = Page + 2 if (xPage < 1) { xPage = 1 dPage = 5 } if (dPage > MaxPage) { dPage = MaxPage xPage = (dPage - 4) } if (xPage < 1) { xPage = 1 } if (Page == 1) { PageStr += "<a class='page_turn'>上一页</a>" } else { //注意:href='/Home/Index?page=" + (Page - 1) + "'还可以写成 href='?page=" + (Page - 1) + "' PageStr += "<a class='page_turn' href='/Home/Index?page=" + (Page - 1) + "'>上一页</a>" } if (xPage > 1) { PageStr += "<a href='/Home/Index?page=1'>1</a>" } if (xPage > 2) { PageStr += " ..." } for (var j = xPage; j <= dPage; j++) { PageStr += (Page == j) ? " <a class=\"on\">" + j + "</a>" : " <a href='/Home/Index?page=" + j + "'>" + j + "</a>"; } if (dPage < MaxPage - 1) { PageStr += " ..." } if (dPage < MaxPage) { PageStr += " <a href='/Home/Index?page=" + MaxPage + "'>" + MaxPage + "</a>" } if (Page == MaxPage) { PageStr += "<a class='page_turn'>下一页</a>" } else { PageStr += "<a class='page_turn' href='/Home/Index?page=" + (Page + 1) + "'>下一页</a>" } PageStr += ' 跳转到:<input id="page_text" type="text" name="page_text"><a id="page_btn" class="page_turn" href="javascript:;">GO</a>' return PageStr } </script>
Home控制器
using MvcTest.DAL; using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcTest.Controllers { public class HomeController : Controller { T_UserService user = new T_UserService(); public ActionResult Index(int page = 1) { ViewBag.Data=user.GetTuserInfo(page,5); return View(); } } }原文链接:https://www.f2er.com/ajax/163494.html