《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();
}
}
}