如何在ASP.NET MVC中实现IList<T>的前端分页展示

嘿，这个场景我太熟悉了！既然所有错误数据都已经在前端了，那实现分页其实比后端分页简单不少，不用再跟数据库打交道，纯前端配合ASP.NET MVC的视图就能搞定，给你一步步拆解：

首先假设你的错误模型是这样的（如果和你的实际结构不一样，替换对应字段就行）：

public class ErrorItem
{
    public int Id { get; set; }
    public string ErrorMessage { get; set; }
    public string ErrorCode { get; set; }
    public DateTime CreatedTime { get; set; }
}

在你的Controller里，把业务逻辑生成的全量错误列表传到View就行，不用做分页处理：

public ActionResult ErrorList()
{
    // 这里是你的业务逻辑，生成所有错误条目
    List<ErrorItem> errorList = YourBusinessLogicToGenerateErrors(); // 替换成你的实际方法

    return View(errorList);
}

在对应的Razor视图里，我们需要做三个核心事情：渲染分页控件、展示当前页数据、用JS处理分页逻辑。下面是完整的视图代码（我用了Bootstrap的样式，你可以换成自己的CSS）：

@model List<ErrorItem>

<div class="container mt-4">
    <h2>错误列表</h2>

    <!-- 每页条数选择器 -->
    <div class="mb-3">
        <label class="me-2">每页显示:</label>
        <select id="pageSizeSelect" class="form-select form-select-sm" style="width: auto;">
            <option value="10">10条</option>
            <option value="20" selected>20条</option>
            <option value="50">50条</option>
            <option value="100">100条</option>
        </select>
    </div>

    <!-- 错误数据表格 -->
    <table class="table table-striped table-bordered">
        <thead class="table-dark">
            <tr>
                <th>ID</th>
                <th>错误信息</th>
                <th>错误码</th>
                <th>创建时间</th>
            </tr>
        </thead>
        <tbody id="errorTableBody">
            <!-- JS会动态渲染当前页的数据 -->
        </tbody>
    </table>

    <!-- 分页控件容器 -->
    <nav>
        <ul class="pagination justify-content-center" id="paginationControls">
            <!-- JS动态生成页码按钮 -->
        </ul>
    </nav>
</div>

<script>
    // 把后端传递的全量错误数据转成JS对象
    const allErrorData = @Html.Raw(Json.Encode(Model));
    let currentPage = 1;
    let pageSize = parseInt(document.getElementById('pageSizeSelect').value);

    // 初始化分页
    function initPagination() {
        renderCurrentPageData();
        renderPaginationButtons();
    }

    // 渲染当前页的错误数据
    function renderCurrentPageData() {
        const startIdx = (currentPage - 1) * pageSize;
        const endIdx = startIdx + pageSize;
        const currentPageItems = allErrorData.slice(startIdx, endIdx);

        const tableBody = document.getElementById('errorTableBody');
        tableBody.innerHTML = '';

        currentPageItems.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.Id}</td>
                <td>${item.ErrorMessage}</td>
                <td>${item.ErrorCode}</td>
                <td>${new Date(item.CreatedTime).toLocaleString()}</td>
            `;
            tableBody.appendChild(row);
        });
    }

    // 渲染分页按钮（包含上一页、页码、下一页）
    function renderPaginationButtons() {
        const totalPages = Math.ceil(allErrorData.length / pageSize);
        const paginationContainer = document.getElementById('paginationControls');
        paginationContainer.innerHTML = '';

        // 上一页按钮
        const prevBtn = document.createElement('li');
        prevBtn.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
        prevBtn.innerHTML = `<a class="page-link" href="#" onclick="switchPage(${currentPage - 1})">上一页</a>`;
        paginationContainer.appendChild(prevBtn);

        // 页码按钮：最多显示5个连续页码，避免太多按钮挤在一起
        let startPage = Math.max(1, currentPage - 2);
        let endPage = Math.min(totalPages, currentPage + 2);

        // 调整页码范围，确保至少显示5个（如果总页数足够）
        if (endPage - startPage < 4) {
            startPage = Math.max(1, endPage - 4);
        }

        for (let i = startPage; i <= endPage; i++) {
            const pageBtn = document.createElement('li');
            pageBtn.className = `page-item ${i === currentPage ? 'active' : ''}`;
            pageBtn.innerHTML = `<a class="page-link" href="#" onclick="switchPage(${i})">${i}</a>`;
            paginationContainer.appendChild(pageBtn);
        }

        // 下一页按钮
        const nextBtn = document.createElement('li');
        nextBtn.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
        nextBtn.innerHTML = `<a class="page-link" href="#" onclick="switchPage(${currentPage + 1})">下一页</a>`;
        paginationContainer.appendChild(nextBtn);
    }

    // 切换页码
    function switchPage(targetPage) {
        const totalPages = Math.ceil(allErrorData.length / pageSize);
        if (targetPage < 1 || targetPage > totalPages) return;

        currentPage = targetPage;
        renderCurrentPageData();
        renderPaginationButtons();
    }

    // 切换每页条数时重置分页
    document.getElementById('pageSizeSelect').addEventListener('change', function() {
        pageSize = parseInt(this.value);
        currentPage = 1; // 切换条数后回到第一页
        initPagination();
    });

    // 页面加载完成后初始化
    window.addEventListener('load', initPagination);
</script>

• 如果错误条目真的超过1000条，担心DOM渲染性能，可以考虑用虚拟滚动（只渲染当前可见区域的条目），不过分页对大多数场景来说已经足够直观
• 可以给错误列表加个搜索框，配合分页一起使用，用户能更快找到目标错误
• 如果不想写原生JS，也可以用轻量的分页插件（比如jQuery Pagination），不过原生JS的方案更轻量，没有依赖

内容的提问来源于stack exchange，提问作者Shuvo Amin