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