首页 Web 简单的分页制作,不涉及数据库的直接操作

简单的分页制作,不涉及数据库的直接操作

实现效果如下:
在这里插入图片描述在这里插入图片描述

.page-box {
    position: relative;
    text-align: center;}

    .page-box a {
        display: inline-block;
        vertical-align: middle;
        padding: 0 15px;
        height: 28px;
        line-height: 28px;
        margin: 0 -6px 5px 0;
        background-color: #fff;
        color: #333;
        font-size: 12px;
        border: 1px solid #e2e2e2;
        box-sizing: content-box;
        width: 28px;
        cursor: pointer;
    }.page-cout {
    margin-right: 10px;
    padding: 0;
    border: none;}.page-box a.page-cur {
    background-color: #009688;
    color: #fff;
    border: 1px solid #009688;}.page-disabled {
    color: #d2d2d2 !important;
    cursor: not-allowed !important;}
@{
    /****
     * 分页计算处理
     * */
    //每页大小
    int pageSize = PageData["PageSize"];
    //当前页
    int curPage = PageData["PageNum"];
    //总页数
    int total = 1000;
    //PageData["Total"];
    //跳转链接
    string url = PageData["Url"];
    //总页数
    int totalPage = (int)(Math.Ceiling(total / (double)pageSize));
    //显示的页码大小
    int showPage = 9;
    //页码两边差值
    int cVal = 4;}@if (total > 0){
    <link href="~/Content/css/page.css" rel="stylesheet" />
    <div class="page-box">
        <span class="page-cout">共@(total)条 </span>
        <a href="@(curPage == 1 ? "javascript:;" : $"{url}/{curPage-1}/{pageSize}")" class="@(curPage == 1 ? "page-disabled" : "")"> ←</a>
        <a href="@(curPage == 1 ? "javascript:;" : $"{url}/{1}/{pageSize}")" class="@(curPage == 1 ? "page-disabled" : "")" title="首页">首页</a>
        @* 总页数小于等于showPage,全部显示 *@
        @if (totalPage <= showPage)
        {
            for (int i = 1; i <= totalPage; i++)
            {
                <a href="@(curPage == i ? "javascript:;" :$"{url}/{i}/{pageSize}")" class="@(curPage == i ? "page-cur" : "") ">@(i)</a>
            }
        }
        @* 总页数大于showPage 处理 *@
        @if (totalPage > showPage)
        {
            //求出页码范围
            int begin = curPage - cVal;
            int end = curPage + cVal;
            //头部超出
            if (begin < 1)
            {
                begin = 1;
                end = showPage;
            }
            //尾部超出
            if (end > totalPage)
            {
                begin = totalPage - showPage;
                end = totalPage;
            }
            for (int i = begin; i <= end; i++)
            {
                <a href="@($"{url}/{i}/{pageSize}")" class="@(curPage == i ? "page-cur" : "") ">@(i)</a>
            }
        }
        <a href="@(curPage == totalPage ? "javascript:;" : $"{url}/{totalPage}/{pageSize}")" class="@(curPage == totalPage ? "page-disabled" : "")" title="尾页">尾页</a>
        <a href="@(curPage == totalPage ? "javascript:;" : $"{url}/{curPage+1}/{pageSize}")" class="@(curPage == totalPage ? "page-disabled" : "")">→</a>
    </div>}


特别声明:本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有,并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利,请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。