jQuery tablesorter 外部日期范围过滤器答案

【问题标题】：jQuery tablesorter external date range filterjQuery tablesorter 外部日期范围过滤器
【发布时间】：2014-01-27 02:18:43
【问题描述】：

我将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 方面的专家，因此我将不胜感激。

谢谢。

【问题讨论】：

标签： javascript jquery html asp.net tablesorter

【解决方案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;
                }
            }
        }

    }
});

【讨论】：