Tablesorter, multiple search in the same column - tablesorter

Question

I'm trying to make a multiple search in a same column. For example if I've a colors columns and I search: "red, yell" the tablesorter should show all the red and yellow rows. I've been searching for it and I've tried to reuse the code to create my own searcher, but any result obtained. Any help would be appreciated. Thanks a lot.
I'm using Jquery 1.8.30 and jquery UI 1.9
<script src="~/Content/tablesorter-master/js/jquery.tablesorter.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/jquery.tablesorter.combined.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/jquery.tablesorter.widgets.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/widgets/widget-columnSelector.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/widgets/widget-filter.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/widgets/widget-headerTitles.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/widgets/widget-output.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/widgets/widget-reorder.js" type="text/javascript"></script>
<script src="~/Content/jquery-ui-daterangepicker-0.4.3/jquery.comiseo.daterangepicker.js" type="text/javascript"></script>
<script src="~/Scripts/moment.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#multiPicker").daterangepicker({
datepickerOptions: {
numberOfMonths: 2,
initialText: '#ViewData("SelectPeriod")'
}
});
// these default equivalents were obtained from a table of equivalents
// provided by sugar.js sorting alogrithms: http://sugarjs.com/sorting
$.tablesorter.characterEquivalents = {
'a': '\u00e1\u00e0\u00e2\u00e3\u00e4\u0105\u00e5', // áàâãäaå
'A': '\u00c1\u00c0\u00c2\u00c3\u00c4\u0104\u00c5', // ÁÀÂÃÄAÅ
'c': '\u00e7\u0107\u010d', // çcc
'C': '\u00c7\u0106\u010c', // ÇCC
'e': '\u00e9\u00e8\u00ea\u00eb\u011b\u0119', // éèêëee
'E': '\u00c9\u00c8\u00ca\u00cb\u011a\u0118', // ÉÈÊËEE
'i': '\u00ed\u00ec\u0130\u00ee\u00ef\u0131', // íìIîïi
'I': '\u00cd\u00cc\u0130\u00ce\u00cf', // ÍÌIÎÏ
'o': '\u00f3\u00f2\u00f4\u00f5\u00f6\u014d', // óòôõöo
'O': '\u00d3\u00d2\u00d4\u00d5\u00d6\u014c', // ÓÒÔÕÖO
'ss': '\u00df', // ß (s sharp)
'SS': '\u1e9e', // ? (Capital sharp s)
'u': '\u00fa\u00f9\u00fb\u00fc\u016f', // úùûüu
'U': '\u00da\u00d9\u00db\u00dc\u016e' // ÚÙÛÜU
};
// modify the above defaults as follows
$.extend($.tablesorter.characterEquivalents, {
"ae": "\u00e6", // expanding characters æ Æ
"AE": "\u00c6",
"oe": "\u00f6\u0153", // œ Œ
"OE": "\u00d6\u0152",
"d": "\u00f0", // Eth (ð Ð)
"D": "\u00d0",
"o": "\u00f3\u00f2\u00f4\u00f5", // remove ö because it's in the oe now
"O": "\u00d3\u00d2\u00d4\u00d5" // remove Ö because it's in the OE now
});
// overflow table
$('.wrapperOverflow table').tablesorter({
debug: true, //Firebug (console) needed --> /docs/example-option-debug.html
//showProcessing: true, //has bugs --> /docs/example-option-show-processing.html
sortMultiSortKey: 'altKey', //Click to sort any column header, then hold down the alt key and select a second column. Continue selecting columns as desired.
widthFixed: true,
widgets: ['filter', 'reorder', 'columnSelector'],
widgetOptions: {
sortList: [[3, 1]], //[[column, asc(0)/desc(1)]]
widgets: ['filter', 'reorder', 'resizable'],
ignoreCase: true, // if false, upper case sorts BEFORE lower case
filter_columnFilters: true,
filter_liveSearch: true,
filter_saveFilters: true,
filter_filteredRow: 'filtered',
filter_functions: true,
reorder_axis: 'xy', // 'x' or 'xy'
reorder_delay: 100,
reorder_helperClass: 'tablesorter-reorder-helper',
reorder_helperBar: 'tablesorter-reorder-helper-bar',
columnSelector_container: $('#columnSelector'),
columnSelector_columns: {},
columnSelector_saveColumns: true,
columnSelector_layout: '<label><input type="checkbox">{name}</label>',
columnSelector_name: 'data-selector-name',
columnSelector_mediaquery: true,
columnSelector_mediaqueryName: '#ViewData("Auto")' + ': ',
columnSelector_mediaqueryState: true,
columnSelector_priority: 'data-priority',
columnSelector_cssChecked: 'checked'
}
});
//http://stackoverflow.com/questions/247305/using-jquery-tablesorter-on-dynamically-modified-table
$('.wrapperOverflow table').trigger("update");
$('.wrapperOverflow table').trigger("appendCache");
//Filters style
$(".tablesorter-filter").addClass("searchStyle");
//Reset button
$('#butReset').click(function () {
var thereIsSearch = false
$(".searchStyle").each(function () {
$('input[type=search]').val('');
thereIsSearch = true
});
if (thereIsSearch == true) {
var e = jQuery.Event("keypress");
e.which = 13; //choose the one you want
e.keyCode = 13;
$('.searchStyle').trigger(e);
}
});
});
</script>

Answer 1

If you are using my fork of tablesorter, then the filter widget will accept "OR" searches using a vertical bar | or the word "or" surrounded by spaces or. Here is an example:
$.tablesorter.setFilters( $('table'), ['', 'Aaron|Peter' ], true );
or
$.tablesorter.setFilters( $('table'), ['', '', 'Hood or Parker' ], true );