Question

我有一个包含php生成内容的表，应该使用jQuery Tablesorter对客户端进行排序和筛选。对于各种数值我使用的是jQueryUI滑块，但由于布局原因不在表头中，而是在单独的部分中。此外，还有一个“全文”搜索，搜索所有（也是隐藏的）行。

现在的问题是，输入全局输入字段会覆盖以前应用的所有过滤器。

这就是我到目前为止所做的事情：

var filters = [];

$('table').tablesorter({
    // some stuff here
    widgets: ['zebra', 'filter'],
    widgetOptions: {
        filter_external: '.search',
        filter_columnFilters: false
    }
});

$('.slider').slider({
    range: true,
    min: 1,
    max: 42,
    values: [12, 28],
    slide: function(event, ui){
        var col = $(this).data('filter-column'),
            txt = ui.values[0] + " - " + ui.values[1];
        // every slider move updates a global filter array
        filters[col] = txt;
    },
    stop: function(event, ui){
        // after the slider is released, the previously defined filter
        // is being applied to the table
        $.tablesorter.setFilters($('table.hasFilters'), filters, true);
    }
});

<div class="slider" data-filter-column="2"></div>
<input type="text" class="search" data-column="all">

第二个过滤器（data-column="all"）应该只过滤滑块的结果集，而不是整个表。

有什么想法吗？

Answer 1

当您在输入上设置data-column="all"时，它会告诉过滤器小部件使用该输入来搜索整个表格以进行匹配。

从版本2.15开始，$.tablesorter.setFilters()函数将接受一个额外的搜索参数来匹配任何列（ref;它可能不够明显，但看起来接近底部“截至... 2.15" 版）

无论如何，试试这段代码（demo） - 它不是最佳解决方案，但它有效：

HTML

<div class="slider" data-filter-column="1"></div>
<div class="display"></div>
<input type="text" class="search" data-column="all">

脚本

var columns,
    filters = [],
    $table = $('table'),
    $display = $('.display'),
    $searchAll = $('.search'),
    initialValues = [12, 28],
    update = function (event, ui) {
        var col = $(this).data('filter-column'),
            // ui is undefined in create event
            txt = ui.values ? ui.values[0] + " - " + ui.values[1] : initialValues.join(' - ');
        // every slider move updates a global filter array
        filters[col] = txt;
        // get searchAll input value;
        filters[columns] = $searchAll.val() || '';
        $display.html(txt);
        // set filters @ creation
        if (!ui.values) {
            setFilters();
        }
    },
    setFilters = function () {
        $.tablesorter.setFilters($table, filters, true);
    };

$table.tablesorter({
    sortList: [[1, 0]],
    // some stuff here
    widgets: ['zebra', 'filter'],
    widgetOptions: {
        filter_external: '.search',
        filter_columnFilters: false
    },
    initialized : function(){
        // set number of columns
        columns = $table[0].config.columns;
    }
});


$('.slider').slider({
    range: true,
    min: 1,
    max: 42,
    values: initialValues,
    create: update,
    slide: update,
    stop: setFilters
});

在tablesorter中链式单列和多列过滤器

1 个答案: