html 表格必须保留分页后下拉过滤器

Question

我有一个包含 2 列和动态行数的 html 表。 和一个下拉过滤器。过滤器工作正常，但过滤后，表格失去了分页。

<div id="bagStatusTable" class="table table-hover" style="margin-top: 5px; margin-left: 10px; display: block; width: 100%;">
    <table id="bag_table_id" style="margin-top:10px">
        <thead>...</thead>
        <colgroup>...</colgroup>
        <tbody>
            <tr style="display: table-row;">
                <td class="bag number" style="font-size:20px; text-align: center; margin-top: 5px">1</td>
                <td id="bag_0_status" class="bag status">
                    <i class="fas fa-running fa-2x" style="color: #FFFF00; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fa9e00;"></i>
                </td>
            </tr>
            <tr style="display: table-row;">
                <td class="bag number" style="font-size:20px; text-align: center; margin-top: 5px">2</td>
                <td id="bag_1_status" class="bag status">
                    <i class="fas fa-running fa-2x" style="color: #FFFF00; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fa9e00;"></i>
                </td>
            </tr>
            <tr style="display: table-row;">...</tr>
            <tr style="display: table-row;">...</tr>
            <tr style="display: table-row;">...</tr>
            <tr style="display: table-row;">...</tr>
            <tr style>...</tr>
            <tr style>...</tr>
            <tr style>...</tr>
            <tr style>...</tr>
            <tr style>...</tr>
            <tr style>...</tr>
        </tbody>    
        <tfoot>...</tfoot>
    </table>
</div>

过滤器

$("#bagStatusFilter").on("change", function() {
    var value = $(this).val().toLowerCase();
    if(value == 'all'){
    $('.bagStatusFilter').val('');
    $('#bag_table_id tr').show();
  }
  else{
    $('#bag_table_id tr').hide();
    $("#bag_table_id tr").filter(function() {
       ($(this).toggle($(this).find("td:nth-child(2)").children().length > 0 && $(this).find("td:nth-child(2)").children()[0].className.includes(value)))
    });

  }  
})

分页

function addPagerToTables(tables, rowsPerPage) {
    tables = 
        typeof tables == "string"
      ? document.querySelectorAll(tables)
      : tables;

    for (let table of tables) 
        addPagerToTable(table, rowsPerPage);
}

function addPagerToTable(table, rowsPerPage) {
    let tBodyRows = table.querySelectorAll('tBody tr');
    let numPages = Math.ceil(tBodyRows.length/rowsPerPage);
    let colCount = 
    [].slice.call(
        table.querySelector('tr').cells
    )
    .reduce((a,b) => a + parseInt(b.colSpan), 0);

    table
    .createTFoot()
    .insertRow()
    .innerHTML = `<td colspan=${colCount}><div class="nav"></div></td>`;

    if(numPages == 1)
        return;

    table.querySelector('.nav')
    .insertAdjacentHTML(
        'beforeend', 
        `<a class="page-link" href="#">&laquo;</a> `
    );

    for(i = 0;i < numPages;i++) {
        let pageNum = i + 1;
        table.querySelector('.nav')
              .insertAdjacentHTML(
                  'beforeend', 
                  `<a class="page-link" href="#" rel="${i}">${pageNum}</a> `
              );
    }


    table.querySelector('.nav')
    .insertAdjacentHTML(
        'beforeend', 
        `<a class="page-link" href="#">&raquo;</a> `
    );

    changeToPage(table, 1, rowsPerPage, numPages);

    for (let navA of table.querySelectorAll('.nav a'))
        navA.addEventListener(
            'click', 
            e => changeToPage(
                table, 
                e.target.innerHTML, 
                rowsPerPage,
                numPages
            )
        );

}

function changeToPage(table, page, rowsPerPage, totalPages) {

    if(isNaN(parseInt(page))){
      page = page === "<<" ? 1 : totalPages
    }

    let startItem = (page - 1) * rowsPerPage;
    let endItem = startItem + rowsPerPage;
    let navAs = table.querySelectorAll('.nav a');
    let tBodyRows = table.querySelectorAll('tBody tr');

    for (let nix = 0; nix < navAs.length; nix++) {

        if (nix == page - 1)
            navAs[nix].classList.add('active');
        else 
            navAs[nix].classList.remove('active');

        for (let trix = 0; trix < tBodyRows.length; trix++) 
            tBodyRows[trix].style.display = 
                (trix >= startItem && trix < endItem)
                ? 'table-row'
                : 'none';  

    }

}

我知道这是因为分页功能将表格视为一个整体，而不仅仅是过滤后的行。 我试图在过滤器函数中返回过滤后的行并让分页函数使用它。 但它不起作用。

如何将过滤后的行返回到数组并使用它？

Answer 1

以下是我注意到的几件事。

在changeToPage 中，你只是在循环table.querySelectorAll('tBody tr')。这不会考虑已隐藏的行。

可能更好的是，当您过滤时，添加或删除一个类，而不是执行.toggle：

$('#bag_table_id tr').each(function() {
  let $this = $(this);
  let match = $this.find('td:nth-child(2)').children().length > 0
    && $this.find('td:nth-child(2)').children()[0].className.includes(value);
  $this.toggleClass('filter-hide', !match);
});

关于此的几点说明：

• 你使用.filter更像.each...最好只使用.each
• $(this) 每次运行一个函数，分配给变量的效率更高。
• 根据需要使用.toggleClass 添加/删除类。
• 将.filter-hide添加到不匹配的那些，这样我们就可以在changeToPage中使用它而不会在没有过滤器的情况下破坏它
• 当然你需要为.filter-hide { display:none; }添加一个css规则

您还需要removeClass 中的if(value==='all')：

$('#bag_table_id tr').removeClass('filter-hide');

现在该类可以添加到changeToPage

let tBodyRows = table.querySelectorAll('tBody tr:not(.filter-hide)');

（因为我们使用的是:not(.filter-hide)，所以如果根本没有应用过滤器，它仍然可以工作）

完成所有这些后，您还需要跟踪分页，以便在执行过滤操作后调用changeToPage...应该这样做！