chain one-column and multi-column filters in tablesorter

Question

I have a table with php-generated content, which should be sort and filtered by the client, using jQuery Tablesorter. For various numeric values I'm using jQueryUI sliders, but due to layout reasons not in the table header, but in a separate section. Additionally, there is a "fulltext"-search, searching in all (also hidden) rows.

Now the problem is, typing in the global input field overrides all previously applied filters.

This is what I'm doing so far:

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">

The second filter (data-column="all") should filter only the result set of the slider, not the whole table.

Any ideas?

Answer 1

When you set data-column="all" on an input, that tells the filter widget to use that input to search the entire table for a match.

As of version 2.15, the $.tablesorter.setFilters() function will accept one additional search parameter to match any column (ref; it's probably not obvious enough, but look near the bottom for "As of ... v2.15")

Anyway, try this code (demo) - it isn't an optimal solution, but it works:

HTML

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

Script

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
});