MVC 分页 （非ajax）

《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 "5FAE8F6F96C59ED1";
        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>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!