基于SQL存储过程的ASP.NET分页链接实现方法问询

这个问题我经常碰到，核心思路其实很清晰：先从存储过程拿到总条数算出总页数，再根据当前页码来动态渲染分页控件。我给你拆解成具体步骤，结合代码示例来说明：

第一步：获取并计算核心分页参数 #

调用你的存储过程后，你会得到两个关键值：

• 当前页的12条数据（用来渲染页面内容）
• TotalCount（总数据条数）

首先计算总页数，这里要注意用浮点数除法避免整数截断（比如100条数据，100/12=8.333，向上取整就是9页）：

// 以C#为例，其他语言逻辑类似
int totalCount = 100; // 从SP获取的TotalCount
int pageSize = 12;
int totalPages = (int)Math.Ceiling(totalCount / (double)pageSize); // 总页数=9

同时要维护一个currentPage变量（当前页码，默认是1，用户点击页码时更新），并且要确保它在有效范围内（不能小于1，也不能大于总页数）：

int currentPage = int.TryParse(Request.Query["page"], out var inputPage) ? inputPage : 1;
currentPage = Math.Clamp(currentPage, 1, totalPages); // 强制限制在1到totalPages之间

第二步：动态渲染分页链接 #

分页控件主要分为三个部分：上一页按钮、页码列表、下一页按钮。下面用HTML结合后端渲染逻辑（以ASP.NET Razor为例，其他后端语言/前端框架逻辑一致）来实现：

完整前端渲染代码 #

<div class="pagination-container">
    <!-- 上一页按钮 -->
    <a href="?page=@(currentPage - 1)" class="page-btn @(currentPage == 1 ? "disabled" : "")">上一页</a>

    <!-- 页码列表（智能显示，避免过多页码） -->
    @{
        // 显示当前页前后2个页码，同时保留首尾页（如果不在范围内）
        int startPage = Math.Max(1, currentPage - 2);
        int endPage = Math.Min(totalPages, currentPage + 2);

        // 显示第一页和省略号（如果开头不是1）
        if (startPage > 1)
        {
            <a href="?page=1" class="page-num">1</a>
            if (startPage > 2)
            {
                <span class="ellipsis">...</span>
            }
        }

        // 显示中间的有效页码
        for (int i = startPage; i <= endPage; i++)
        {
            <a href="?page=@i" class="page-num @(i == currentPage ? "active" : "")">@i</a>
        }

        // 显示最后一页和省略号（如果结尾不是总页数）
        if (endPage < totalPages)
        {
            if (endPage < totalPages - 1)
            {
                <span class="ellipsis">...</span>
            }
            <a href="?page=@totalPages" class="page-num">@totalPages</a>
        }
    }

    <!-- 下一页按钮 -->
    <a href="?page=@(currentPage + 1)" class="page-btn @(currentPage == totalPages ? "disabled" : "")">下一页</a>
</div>

配套CSS样式（让分页控件更美观） #

.pagination-container {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-btn, .page-num {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s;
}

.page-num.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    pointer-events: none;
}

.page-btn.disabled {
    color: #ccc;
    border-color: #eee;
    pointer-events: none;
    cursor: not-allowed;
}

.ellipsis {
    color: #666;
}

.page-btn:hover:not(.disabled), .page-num:hover:not(.active) {
    background-color: #f5f5f5;
}

第三步：边界情况处理 #

别忘了处理一些特殊场景：

• 如果TotalCount为0（没有数据），直接隐藏整个分页控件
• 如果总页数为1（比如只有8条数据），只显示当前页，隐藏上一页和下一页按钮
• 用户手动在URL输入无效页码（比如?page=999），要自动修正为有效页码（比如总页数是9就跳转到第9页）

这样实现出来的分页控件就和你要的[上一页] [1],[2],[3] [下一页]样式一致，而且还支持大数据量时的智能页码显示，不会出现几百个页码挤在一起的情况。

内容的提问来源于stack exchange，提问作者Geo Concepts