将下拉过滤器添加到表 jQuery

Question

我只想在我的表格中添加一个过滤器，以按免费礼物过滤交易...不知道该怎么做。

我已经为过滤器制作了下拉框，但是如何在不作弊的情况下使用需要过滤的数据填充它 - 我需要它来实际检查表格中的可过滤数据，因为表格是在 php 中创建的而且我无法使用可过滤选项手动设置过滤器预设，因为我的网站上有很多表格。

您可以在这里看到https://jsfiddle.net/51Le6o06/26/ 作为示例，这就是当前正在发生的事情 - 每行包含一个子行，并且还有分页，并且有两个表，因为它必须与同一页面上的多个表一起使用。

那么我该如何创建这个过滤器呢？

jQuery

jQuery.fn.sortPaging = function(options) {
    var defaults = {
        pageRows: 4
    };
    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();

HTML

<h1>Table sorting on page load with paging</h1>

<div class="sort_paging">

    <p>
        <input type="checkbox" class="filter-free" /> Free Handset
        <select class="filter-gift">
          <!-- Options must be filled by jQuery from HTML $(.information)-->
        </select>
    </p>

    <table class="internalActivities">
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£364.00 upfront</span>
                    <br><span class="amount">£10.10 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free TV
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£40.40 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free TV
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£30.30 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free TV
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£16.04 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free XBOX
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£134.00 upfront</span>
                    <br><span class="amount">£12.19 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free XBOX
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£120.00 upfront</span>
                    <br><span class="amount">£14.22 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free XBOX
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£50.22 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free XBOX
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£10.33 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free PS4
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£40.45 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free PS4
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£200.00 upfront</span>
                    <br><span class="amount">£30.84 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free PS4
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£16.14 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free PS4
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£12.10 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free Biscuits
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£14.02 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free Biscuits
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£50.88 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free Biscuits
                </p></td>
            </tr>
        </tbody>
    </table>

    <input type="button" class="seeMoreRecords" value="More">
    <input type="button" class="seeLessRecords" value="Less">

</div>

<h2>Second table below</h2>

<div class="sort_paging">

    <p>
        <input type="checkbox" class="filter-free" /> Free Handset
        <select class="filter-gift">
          <!-- Options must be filled by jQuery from HTML $(.information)-->
        </select>
    </p>

    <table class="internalActivities">
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£364.00 upfront</span>
                    <br><span class="amount">£10.10 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free TV
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£40.40 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free TV
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£30.30 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free TV
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£16.04 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free XBOX
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£134.00 upfront</span>
                    <br><span class="amount">£12.19 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free XBOX
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£120.00 upfront</span>
                    <br><span class="amount">£14.22 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free XBOX
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£50.22 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free XBOX
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£10.33 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free PS4
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£40.45 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free PS4
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£200.00 upfront</span>
                    <br><span class="amount">£30.84 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free PS4
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£16.14 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free PS4
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£12.10 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free Biscuits
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£14.02 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free Biscuits
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£50.88 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free Biscuits
                </p></td>
            </tr>
        </tbody>
    </table>

    <input type="button" class="seeMoreRecords" value="More">
    <input type="button" class="seeLessRecords" value="Less">

</div>

Answer 1

我最后模仿了你的情况，我非常接近你的要求。使用此模板。

完全删除您的旧代码。 更新了 jsfiddle https://jsfiddle.net/51Le6o06/39/ .

现在在您的 html 中进行这些更改。 sort_paging 类有两个地方。给他们像下面这样的标签。

<div class="sort_paging" tag="tab1">
<div class="sort_paging" tag="tab2">

 $(document).ready(function () {
    //   Initialize();
    $('.filter-free').click(filterItems);
   })

   function filterItems(e) {
var items = [];
var checked = this.checked;
var table = '';
tableId = $(this).parent().parent().attr('tag')
if (checked) {
    var listItems = "";
    listItems += "<option value='0'> -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>";
        }
    });
}
else {
    listItems = "<option value='0'> -Select- </option>";
}
$('div[tag="' + tableId+ '"] .filter-gift').html(listItems);

$('.filter-gift').change(function () {
    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();
            }
        });           
    });    
 }
     function Initialize(){
// your old code here
jQuery.fn.sortPaging = function(options) {.....
}

Answer 2

Rob Bayliss 开发了一个脚本，他在http://rbayliss.net/jquery-dropdown-table-filter 提供下载。它应该适合您的需求。

$('#table_format').ddTableFilter()