如何实现分页表格全局数据过滤（而非仅当前页过滤）

你的现有代码仅能过滤当前DOM中存在的表格行（也就是分页的当前页），要实现全局过滤并保留分页结构，核心是基于原始全量数据进行筛选，再重新生成分页内容，具体实现如下：

核心思路 #

1. 页面加载时保存所有表格行的原始数据（包括HTML结构和文本内容）
2. 搜索时基于原始数据筛选匹配的行
3. 根据筛选结果重新计算分页，渲染当前页内容并更新分页控件

完整代码示例 #

JavaScript 代码

$(document).ready(function () {
    // 全局变量：保存原始数据、当前页码、每页条数
    let originalRows = [];
    let currentPage = 1;
    const rowsPerPage = 10; // 替换为你实际的每页显示条数

    // 初始化：保存所有表格行的原始数据
    $("#myTablee tr").each(function() {
        originalRows.push({
            html: $(this).prop('outerHTML'),
            text: $(this).text().toLowerCase()
        });
    });

    // 过滤并渲染表格的核心函数
    function filterAndRenderTable(searchValue) {
        // 筛选匹配搜索词的行
        const filteredRows = originalRows.filter(row => row.text.indexOf(searchValue) > -1);
        
        // 计算总页数，修正当前页码范围
        const totalPages = Math.ceil(filteredRows.length / rowsPerPage);
        currentPage = Math.max(1, Math.min(currentPage, totalPages));

        // 清空表格（保留表头行）
        $("#myTablee tr:not(:first)").remove();
        // 渲染当前页的行
        const start = (currentPage - 1) * rowsPerPage;
        const end = start + rowsPerPage;
        filteredRows.slice(start, end).forEach(row => $("#myTablee").append(row.html));

        // 更新分页控件
        updatePagination(totalPages, currentPage);
    }

    // 更新分页控件（根据你的分页组件调整此函数）
    function updatePagination(totalPages, currentPage) {
        $('.pagination').empty();
        // 上一页按钮
        $('.pagination').append(`<li class="page-item ${currentPage === 1 ? 'disabled' : ''}"><a class="page-link" href="#" data-page="${currentPage - 1}">上一页</a></li>`);
        // 页码按钮
        for (let i = 1; i <= totalPages; i++) {
            $('.pagination').append(`<li class="page-item ${i === currentPage ? 'active' : ''}"><a class="page-link" href="#" data-page="${i}">${i}</a></li>`);
        }
        // 下一页按钮
        $('.pagination').append(`<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}"><a class="page-link" href="#" data-page="${currentPage + 1}">下一页</a></li>`);
    }

    // 搜索框输入监听
    $("#MyInput").on("keyup", function () {
        currentPage = 1; // 搜索时默认回到第一页
        filterAndRenderTable($(this).val().toLowerCase());
    });

    // 分页按钮点击监听
    $(document).on('click', '.pagination .page-link', function(e) {
        e.preventDefault();
        const targetPage = parseInt($(this).data('page'));
        if (targetPage >= 1 && targetPage <= Math.ceil(originalRows.length / rowsPerPage)) {
            currentPage = targetPage;
            filterAndRenderTable($("#MyInput").val().toLowerCase());
        }
    });

    // 初始化分页控件
    updatePagination(Math.ceil(originalRows.length / rowsPerPage), currentPage);
});

HTML 结构示例

<input class="form-control" id="MyInput" type="text" placeholder="search">

<table id="myTablee">
    <thead>
        <tr>
            <th>列名1</th>
            <th>列名2</th>
            <!-- 其他表头列 -->
        </tr>
    </thead>
    <tbody>
        <!-- 表格数据行 -->
    </tbody>
</table>

<!-- 分页控件容器 -->
<ul class="pagination"></ul>

注意事项 #

• 替换rowsPerPage为你实际项目中每页显示的行数
• updatePagination函数需要根据你使用的分页组件（如Bootstrap分页、自定义分页）调整DOM结构和样式
• 如果表格数据是通过AJAX异步加载的，需在数据加载完成后再执行originalRows的保存逻辑

内容的提问来源于stack exchange，提问作者hossam reda