将新过滤器功能与现有分页合并并过滤jQuery/Javascript

Question

我遇到了新的表过滤功能问题,选择要过滤的商品时会出现问题 - 而不是显示表中所有可过滤数据的行,过滤器仅过滤可见行减去分页隐藏的数据.

最重要的是,当我点击更多以显示更多行时,表开始显示当前过滤器之外的数据.哪个不好.

我还有另一个过滤功能来过滤"免费手机",它已经与我的分页方法(下面的代码)相结合.

如何将此过滤器(下拉列表)与我的"免费手机"过滤器(复选框一)和分页方法合并,这样当我选择过滤器过滤选项时,会处理表格内的所有数据,而不仅仅是分页显示可见行.

https://jsfiddle.net/51Le6o06/48/

上面的小提示显示两个过滤功能并排工作,但它们不能很好地协同工作.

正如您在上面的jsfiddle中看到的那样,下拉过滤器从HTML中收集其选项,然后在下拉菜单中显示它们,因此所有选项都可以通过分页隐藏来过滤.

这是每个函数的jQuery和Javascript.

这是一个功能不佳的新过滤器.

$(document).ready(function() {
    $('.filter-gift').each(filterItems);
});

function filterItems(e) {
    var items = [];
    var table = '';
    tableId = $(this).parent().parent().attr('tag')

      var listItems = "";
        listItems += "<option value=''> -Select- </option>";
        $('div[tag="' + tableId + '"] table.internalActivities .information').each(function (i) {
            var itm = $(this)[0].innerText;
            if ($.inArray(itm, items) == -1) {
                items.push($(this)[0].innerText);
                listItems += "<option value='" + i + "'>" + $(this)[0].innerText + "</option>";
            }
        });

    $('div[tag="' + tableId+ '"] .filter-gift').html(listItems);

    $('.filter-gift').change(function () {
    if($(this).val()!= "") {
        var tableIdC = $(this).parent().parent().attr('tag');

        var text = $('div[tag="' + tableIdC + '"] select option:selected')[0].text.replace(/(\r\n|\n|\r| |)/gm, "");;
            $('div[tag="' + tableIdC + '"] .product-information-row').each(function (i) {
                if ($(this).text().replace(/(\r\n|\n|\r| |)/gm, "") == text) {
                    $(this).show();
                    $(this).prev().show();
                    $(this).next().show();
                }
                else {
                    $(this).hide();
                    $(this).prev().hide();
                    $(this).next().hide();
                }
            }); 
            } else {
            $(this).parent().parent().find('table tr').show();
            }
        });     
}

这是我想要与上述函数(工作)合并的过滤器和分页功能.

jQuery.fn.sortPaging = function(options) {
    var defaults = {
        pageRows: 2
    };
    var settings = $.extend(true, defaults, options);
    return this.each(function() {

        var container = $(this);
        var tableBody = container.find('.internalActivities > tbody');
        var dataRows = [];
        var currentPage = 1;
        var maxPages = 1;
        var buttonMore = container.find('.seeMoreRecords');
        var buttonLess = container.find('.seeLessRecords');
        var buttonFree = container.find('.filter-free');
        var tableRows = [];
        var maxFree = 0;
        var filterFree = buttonFree.is(':checked');
        function displayRows() {
            tableBody.empty();
            var displayed = 0;
            $.each(dataRows, function(i, ele) {
                if( !filterFree || (filterFree && ele.isFree) ) {
                    tableBody.append(ele.thisRow).append(ele.nextRow);
                    displayed++;
                    if( displayed >= currentPage*settings.pageRows ) {
                        return false;
                    };
                };
            });
        };
        function checkButtons() {
            buttonLess.toggleClass('element_invisible', currentPage<=1);
            buttonMore.toggleClass('element_invisible', filterFree ? currentPage>=maxFreePages : currentPage>=maxPages);
        };
        function showMore() {
            currentPage++;
            displayRows();
            checkButtons();
        };
        function showLess() {
            currentPage--;
            displayRows();
            checkButtons();
        };
        function changedFree() {
            filterFree = buttonFree.is(':checked');
            if( filterFree && currentPage>maxFreePages ) {
                currentPage=maxFreePages;
            };
            displayRows();
            checkButtons();
        };

        tableBody.find('.product-data-row').each(function(i, j) {
            var thisRow = $(this);
            var nextRow = thisRow.next();
            var amount = parseFloat(thisRow.find('.amount').text().replace(/£/, ''));
            var isFree = thisRow.find('.free').length;
            maxFree += isFree;
            dataRows.push({
                amount: amount,
                thisRow: thisRow,
                nextRow: nextRow,
                isFree: isFree
            });
        })

        dataRows.sort(function(a, b) {
            return a.amount - b.amount;
        });
        maxPages = Math.ceil(dataRows.length/settings.pageRows);
        maxFreePages = Math.ceil(maxFree/settings.pageRows);

        tableRows = tableBody.find("tr");

        buttonMore.on('click', showMore);
        buttonLess.on('click', showLess);
        buttonFree.on('change', changedFree);

        displayRows();
        checkButtons();

    })

};

$('.sort_paging').sortPaging();

目标

• 使用分页功能使过滤器工作.
• 使用"Free Handset"过滤器同时使过滤器工作.

Answer 1

您的代码不必要地复杂。尝试将其分解为必要的步骤。关于你的基本问题：一次性完成所有事情（阅读下文以完全理解我的方法）：

function onFilterChange() {
    filterProducts();
    resetPagination();
    showNextPage();
}

还可以改进您的数据结构：

如果您使用 html 作为数据源，请在主要对象中使用属性，这样可以轻松找到它们。使用多个 tbody 标签对您的 tr 进行分组：

<tbody freeTv='false' freeHandset='false' cost='200'>
    <tr>
        <td>content of product 1</td>
    </tr>
    <tr>
        <td>description of product 1</td>
    </tr>
</tbody>
<tbody freeTv='true' freeHandset='false' cost='300'>
    <tr>
        <td>content of product 2</td>
    </tr>
    <tr>
        <td>description of product 2</td>
    </tr>
</tbody>

我更喜欢向我的元素添加类，而不是删除/添加整个元素。请注意，如果您打算使用 nth-css-styling，这会造成混乱。如果你不需要它，这是一种很好的、​​易于调试的添加交互的方式：

function filterProducts() {
    $('tbody').addClass('filtered');
    // ... some domain-specific magic here ...
    $('tbody[freeTv="true"]').removeClass('filtered');
}

现在你只需要一个 .filtered css 定义，例如：

.filtered { display: none; }

对于分页，您可以以类似的方式进行操作。首先隐藏所有内容（再次使用 css .paged { display: none; }）：

function resetPagination() {
    $('tbody').addClass('paged');
    $('tbody.filtered').removeClass('paged');
}

然后显示您想要的内容（前 10 页）：

function showNextPage() {
    $('tbody.paged').slice(0, 10).removeClass('paged');
}

https://jsfiddle.net/g9zt0fan/