Tablesorter demo
All options included, as well as the uitheme widget
by Mottie
HTML
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<script src="https://rawgit.com/Mottie/tablesorter/master/dist/js/jquery.tablesorter.combined.min.js"></script>
Looking for an OR logic where select "Yes" in all three Test columns will show rows with an ID of 2, 3, and 4, but NOT 1.
<table class="tablesorter">
<thead>
<tr>
<th>ID</th>
<th class="filter-select filter-OR" data-value="Yes">Test 1 (OR 1)</th>
<th class="filter-select filter-OR" data-value="Yes">Test 2 (OR 2)</th>
<th class="filter-select">Test 3</th>
<th class="filter-select">Test 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>No</td>
<td>No</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>2</td>
<td>Yes</td>
<td>No</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>3</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>4</td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>5</td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>6</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
JavaScript
$(function () {
var $table = $('table'),
// get 'filter-OR' column indexes
orColumns = $('.filter-OR').map(function (i) {
return this.cellIndex;
}).get(),
filterfxn = function (e, n, f, i, $r, c) {
var col, v,
showRow = false,
content = [];
$r.children().filter(function (indx) {
if (orColumns.indexOf(indx) > -1) {
v = (c.$filters.eq(indx).find('.tablesorter-filter').val() || '').toLowerCase();
showRow = showRow || $(this).text().toLowerCase() === v;
}
});
return showRow;
};
$table.tablesorter({
theme: 'green',
widgets: ['uitheme', 'zebra', 'columns', 'filter'],
sortReset: true,
sortRestart: true,
widthFixed: true,
widgetOptions: {
filter_functions: {
'.filter-OR': {
'Yes': filterfxn,
'No' : filterfxn
}
}
}
});
});