ASP.NET MVC新手求助：基于Bootstrap表格的ListView分页实现

嘿，刚上手ASP.NET MVC就碰到分页问题很正常，你已经有了Bootstrap的表格样式和分页UI，接下来咱们不用DataTables这些第三方插件，自己写一套简单的jQuery分页逻辑就行，我给你一步步讲清楚：

第一步：确认你的前端基础结构 #

先确保页面里有这些核心元素（如果没有的话补上）：

• 表格的tbody用来动态渲染数据：

<tbody id="dataContainer"></tbody>

• 分页控件（保留你已有的Bootstrap样式，调整成带ID的结构方便JS操作）：

<ul class="pagination" id="paginationControls">
    <li class="page-item"><a class="page-link" href="#" id="prevPage">上一页</a></li>
    <!-- 页码按钮会通过JS动态生成 -->
    <li class="page-item"><a class="page-link" href="#" id="nextPage">下一页</a></li>
</ul>
<!-- 用隐藏字段存储分页参数，避免全局变量污染 -->
<input type="hidden" id="currentPage" value="1" />
<input type="hidden" id="pageSize" value="10" />
<input type="hidden" id="totalPages" value="0" />

第二步：编写核心jQuery分页脚本 #

把这段代码放在页面底部（或者单独的JS文件里），逻辑很清晰：加载数据、渲染表格、更新分页控件、绑定点击事件：

$(document).ready(function() {
    // 页面初始化时加载第一页数据
    loadPage(1);

    // 加载指定页码数据的核心函数
    function loadPage(pageNumber) {
        const pageSize = $("#pageSize").val();
        
        // 发送AJAX请求到后端获取分页数据
        $.ajax({
            url: '@Url.Action("GetPagedData", "YourController")', // 替换成你的控制器和Action名称
            type: 'GET',
            data: {
                page: pageNumber,
                pageSize: pageSize
            },
            success: function(response) {
                // 渲染数据到表格
                renderTableRows(response.data);
                // 更新分页参数
                $("#currentPage").val(pageNumber);
                $("#totalPages").val(response.totalPages);
                // 刷新分页控件状态
                updatePaginationUI();
            },
            error: function() {
                alert('加载数据失败，请稍后重试');
            }
        });
    }

    // 渲染表格行的函数
    function renderTableRows(data) {
        const tbody = $("#dataContainer");
        tbody.empty(); // 清空旧数据
        
        // 遍历数据生成表格行，替换成你实际的字段
        $.each(data, function(index, item) {
            const row = $("<tr>");
            row.append($("<td>").text(item.Id));
            row.append($("<td>").text(item.Title));
            row.append($("<td>").text(item.CreatedDate));
            tbody.append(row);
        });
    }

    // 更新分页控件的状态和页码按钮
    function updatePaginationUI() {
        const currentPage = parseInt($("#currentPage").val());
        const totalPages = parseInt($("#totalPages").val());
        const paginationUl = $("#paginationControls");
        
        // 移除旧的页码按钮（保留上/下一页）
        paginationUl.find(".page-item:not(#prevPage, #nextPage)").remove();
        
        // 生成新的页码按钮
        for(let i = 1; i <= totalPages; i++) {
            const li = $("<li>").addClass("page-item");
            if(i === currentPage) li.addClass("active"); // 当前页高亮
            const a = $("<a>").addClass("page-link").attr("href", "#").text(i);
            
            // 绑定页码点击事件
            a.click(function(e) {
                e.preventDefault();
                loadPage(parseInt($(this).text()));
            });
            
            li.append(a);
            // 插入到下一页按钮前面
            $("#nextPage").parent().before(li);
        }
        
        // 处理上/下一页的禁用状态
        $("#prevPage").parent().toggleClass("disabled", currentPage === 1);
        $("#nextPage").parent().toggleClass("disabled", currentPage === totalPages);
    }

    // 上一页按钮点击事件
    $("#prevPage").click(function(e) {
        e.preventDefault();
        const currentPage = parseInt($("#currentPage").val());
        if(currentPage > 1) loadPage(currentPage - 1);
    });

    // 下一页按钮点击事件
    $("#nextPage").click(function(e) {
        e.preventDefault();
        const currentPage = parseInt($("#currentPage").val());
        const totalPages = parseInt($("#totalPages").val());
        if(currentPage < totalPages) loadPage(currentPage + 1);
    });
});

第三步：后端ASP.NET MVC Action实现 #

在你的控制器里写对应的Action，用来返回分页后的JSON数据：

public ActionResult GetPagedData(int page = 1, int pageSize = 10)
{
    // 替换成你的数据查询逻辑，建议直接在数据库层面分页（避免加载全部数据）
    var dbContext = new YourDbContext();
    var totalItems = dbContext.YourModels.Count();
    var totalPages = (int)Math.Ceiling((double)totalItems / pageSize);
    
    // 分页查询：跳过前面的记录，取指定条数
    var pagedData = dbContext.YourModels
        .Skip((page - 1) * pageSize)
        .Take(pageSize)
        .ToList();
    
    // 返回前端需要的数据结构：分页数据+总页数
    return Json(new { data = pagedData, totalPages = totalPages }, JsonRequestBehavior.AllowGet);
}

几个关键注意点 #

• 替换代码里的YourController、YourDbContext、YourModels以及表格字段为你项目里的实际内容
• 如果数据量较大，一定要在数据库层面做分页（上面的EF写法就是直接生成分页SQL，性能更好），不要先把全部数据加载到内存再分页
• 可以根据需求调整pageSize的值，甚至可以做一个下拉框让用户自己选择每页显示条数

内容的提问来源于stack exchange，提问作者omkar mhaiskar