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