Question

我使用tablesorter（一个jQuery插件）和一个自定义表格，我想用日期范围过滤该表格，如example。与此示例不同，我希望将我的日期范围放在表格之外。我知道他们已经包含了在上一次更新here中在表外设置过滤器的方法。我想知道是否有可能。如果没有，有没有办法用Javascript做到这一点？

我想要这样的事情：

filter_functions: {

    MySelectBox :{
                "Show all"   : function(e, n, f, i) {
                    return ; // Show all entries
                 },
                "Newest": function(e, n, f, i) {
                    return ; // Today's entries
                 }
    }
}

我不是javascript的专家，所以我会感谢任何帮助。

感谢。

Answer 1

我认为最简单的解决方案是继续添加所有默认过滤器输入。添加外部选择并使其更新内部选择;然后隐藏过滤器行（demo）：

HTML

<select>
    <option>Show all</option>
    <option>Newest</option>
    <option>Older</option>
</select>
<table class="tablesorter">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th data-placeholder="Show all">Date</th>
        </tr>
    </thead>
    <tbody>
    ...
    </tbody>
</table>

CSS

.tablesorter-filter-row {
    display: none;
}

脚本

var $table = $('table'),
    today = new Date().getTime();

$('select').change(function () {
    $table
        // target the 4th (zero-based index) filter
        // and update it with the value from the external select
        .find('.tablesorter-filter').eq(3).val( $(this).val() )
        .change();
});

$table.tablesorter({
    widgets: ['zebra', 'filter'],
    widgetOptions: {
        filter_functions: {
            3: {
                "Newest": function (e, n, f, i) {
                    return n >= today;
                },
                "Older": function (e, n, f, i) {
                    return n < today;
                }
            }
        }

    }
});

jQuery tablesorter外部日期范围过滤器

1 个答案: