Question

我正在使用DataTables插件在我的网页上显示可搜索的表。

DataTables带有内置的搜索栏，但是我想从单独的下拉框中获得一些其他功能。在此下拉列表中，我有一组特定的可能过滤器。这是我的下拉菜单

<div class="ui segment">
    <div class="field">
        <select id="searchFilter">
            <option value="0">Show All</option>
            <option value="beats">Show Only Beats</option>
            <option value="bose">Show Only Bose</option>
            <option value="computer">Show Only Computers</option>
            <option value="gaming">Show Only Gaming</option>
            <option value="ios">Show Only iOS</option>
            <option value="lenovo_accessory">Show Only Lenovo Accessory</option>
            <option value="lenovo_tablet">Show Only Lenovo Tablet</option>
            <option value="misc_monitor">Show Only MISC Monitors</option>
            <option value="misc_phone">Show Only MISC Phones</option>
            <option value="misc_tablet">Show Only MISC Tablet</option>
            <option value="misc_watch">Show Only MISC Watches</option>
            <option value="samsung">Show Only Samsung</option>
        </select>
        <label>Narrow by Category (WIP)</label>
    </div>
</div>

此过滤器旨在缩小我的大型数据集，以便用户可以在特定类别中搜索他们要查找的内容。

我表中的每一行都定义为：

<tr class="accessory_row tag-{{ @acc[category] }}">
   ...
</tr>

@acc[category]是该行的类别。因此，如果某行的类别为lenovo_tablet，则该行的类别为tag-lenovo_tablet。

我目前有一些代码可以过滤表格，但是，它不能过滤分页，并且如果您切换页面（在表格中），过滤器将被删除。

$("#searchFilter").on('change', function() {
    var value = $(this).val();
    filter_by_category(value);
});

function filter_by_category(term) {
    $('.accessory_row').hide();

    if(term === "0") {
        $('.accessory_row').show();
    } else {
        $('.tag-' + term).show();
    }
}

要解决此问题，我认为我需要使用内置在数据表（$.fn.DataTable.ext.search.push）中的函数，但实际上我不确定如何实现它。这是我到目前为止的内容：

$("#searchFilter").on('change', function() {
    var value = $(this).val();
    $.fn.DataTable.ext.search.push((_, __, idx) => $(table.row(idx).node()).hasClass('.tag-' + term));
    table.draw();
});

但这似乎并没有对表格进行任何视觉更改。

如何过滤表以仅显示此下拉过滤器设置的行？

Answer 1

删除选项值中的下划线。将数据表分配给变量

const table = $('#table-id').DataTable({options});

然后在您的搜索功能中

table.column(columnIndex).search(searchOptionValue).draw();

列索引从0开始。无需为所有内容分配类。如果您想重置搜索，请

table.columns().search('').draw();

通过下拉过滤器缩小数据表

1 个答案: