如何解决jQuery simplePagination.js搜索时分页失效问题

问题：使用jQuery simplePagination.js实现分页功能，未搜索时分页正常，但搜索后分页功能失效。例如按月份“March”搜索，该月份仅有2条数据，但分页仍显示多余页码，正确情况下应仅显示1页。

问题原因 #

1. 初始分页基于表格所有行的总数初始化，搜索后只是隐藏不符合条件的行，分页组件未更新总数据量，导致页码仍按原总数生成。
2. 分页点击事件操作所有行，未区分过滤后显示的行，导致分页逻辑错误。

解决方案 #

修改代码如下，重点调整过滤函数和分页逻辑：

<form class="form-horizontal style-form container">
    <div class="form-group" style="margin-right: 7%;">
        <label class="col-sm-2">Name</label>
        <input class="col-sm-6" type="text" id="name" style="margin-left: 5%;" />
    </div>
    <div class="form-group" style="margin-right: 7%;">
        <label class="col-sm-2">Month</label>
        <select class="col-sm-6" style="margin-left: 5%;" id="month">
            <option value=""></option>
            <option value="January">January</option>
            <option value="February">February</option>
            <option value="March">March</option>
            <option value="April">April</option>
            <option value="May">May</option>
            <option value="June">June</option>
            <option value="July">July</option>
            <option value="August">August</option>
            <option value="September">September</option>
            <option value="October">October</option>
            <option value="November">November</option>
            <option value="December">December</option>
        </select>
    </div>
    <div class="form-group" style="margin-right: 7%;">
        <label class="col-sm-2">Year</label>
        <select class="col-sm-6" style="margin-left: 5%;" id="year">
            <option value=""></option>
        </select>
    </div>
    <div class="form-group col-sm-4">
        <input class="btn btn-sm" type="button" value="SEARCH" onclick="filtering();" />
    </div>
</form>

<div class="container">
    <table class="table table-striped" id="data" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Month</th>
                <th>Year</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice Jay</td>
                <td>January</td>
                <td>2023</td>
            </tr>
            <tr>
                <td>Park Jay</td>
                <td>December</td>
                <td>2023</td>
            </tr>
            <tr>
                <td>Janey</td>
                <td>March</td>
                <td>2022</td>
            </tr>
            <tr>
                <td>Alex Lee</td>
                <td>April</td>
                <td>2021</td>
            </tr>
            <tr>
                <td>Karl Har</td>
                <td>March</td>
                <td>2021</td>
            </tr>
            <tr>
                <td>Herry</td>
                <td>January</td>
                <td>2020</td>
            </tr>
            <tr>
                <td>Wendy Lee</td>
                <td>January</td>
                <td>2023</td>
            </tr>
            <tr>
                <td>Rayan Otto</td>
                <td>January</td>
                <td>2023</td>
            </tr>
            <tr>
                <td>Ellie B</td>
                <td>January</td>
                <td>2023</td>
            </tr>
            <tr>
                <td>George</td>
                <td>January</td>
                <td>2023</td>
            </tr>
            <tr>
                <td>Tammy</td>
                <td>August</td>
                <td>2021</td>
            </tr>
            <tr>
                <td>John Johnny</td>
                <td>July</td>
                <td>2021</td>
            </tr>
            <tr>
                <td>Kenny Daniel</td>
                <td>June</td>
                <td>2021</td>
            </tr>
            <tr>
                <td>Leon E</td>
                <td>December</td>
                <td>2022</td>
            </tr>
            <tr>
                <td>Sam Henry</td>
                <td>February</td>
                <td>2022</td>
            </tr>
        </tbody>
    </table>
    <div id="pagination-container"></div>
</div>

<script>
    window.onload = function() {
        var year = document.getElementById("year");
        var currentYear = (new Date()).getFullYear();
        for (var i = 2019; i <= currentYear; i++) {
            var option = document.createElement("OPTION");
            option.innerHTML = i;
            option.value = i;
            year.appendChild(option);
        }
        // 初始化分页
        initPagination();
    };

    var names = document.getElementById("name");
    var months = document.getElementById("month");
    var years = document.getElementById("year");
    var perPage = 5;
    var $allItems = $("tbody tr");
    var $visibleItems = $allItems;

    function filtering() {
        var Name = names.value.toUpperCase();
        var Month = months.value.toUpperCase();
        var Year = years.value.toUpperCase();

        $allItems.each(function() {
            var txtName = $(this).find('td').eq(0).text().toUpperCase();
            var txtMonth = $(this).find('td').eq(1).text().toUpperCase();
            var txtYear = $(this).find('td').eq(2).text().toUpperCase();

            if (txtName.indexOf(Name) > -1 && txtMonth.indexOf(Month) > -1 && txtYear.indexOf(Year) > -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });

        // 更新可见项并重新初始化分页
        $visibleItems = $allItems.filter(':visible');
        $('#pagination-container').pagination('updateItems', $visibleItems.length);
        // 跳转到第一页
        $('#pagination-container').pagination('selectPage', 1);
    }

    function initPagination() {
        $('#pagination-container').pagination({
            items: $allItems.length,
            itemsOnPage: perPage,
            prevText: "&laquo;",
            nextText: "&raquo;",
            onPageClick: function(pageNumber) {
                var showFrom = perPage * (pageNumber - 1);
                var showTo = showFrom + perPage;
                // 先隐藏所有可见项，再显示当前页的项
                $visibleItems.hide().slice(showFrom, showTo).show();
            }
        });
    }
</script>

修改说明 #

1. 把分页初始化封装成initPagination函数，页面加载时调用。
2. 新增$allItems和$visibleItems变量，分别存储所有行和过滤后显示的行。
3. 修改filtering函数，用jQuery简化DOM操作，过滤完成后更新$visibleItems，并调用分页组件的updateItems方法更新总数据量，同时跳转回第一页。
4. 调整分页的onPageClick事件，只对$visibleItems进行分页操作，确保只处理过滤后显示的行。

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