Demo: With the Filter Widget
Search/Highlight all columns:
Rank |
First Name |
Last Name |
Age |
Total |
Discount |
Date |
---|---|---|---|---|---|---|
1 | Philip Aaron Wong | Johnson Sr Esq | 25 | $5.95 | 22% | Jun 26, 2004 7:22 AM |
11 | Aáron | Hibert | 12 | $2.99 | 5% | Aug 21, 2009 12:21 PM |
12 | Brandon Clark | Henry Jr | 51 | $42.29 | 18% | Oct 13, 2000 1:15 PM |
111 | Peter | Párker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM |
21 | John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM |
013 | Clark | Kènt Sr. | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
005 | Bruce | Almighty Esq | 45 | $153.19 | 44% | Jan 18, 2021 9:12 AM |
10 | Alex | Dumāss | 13 | $5.29 | 4% | Jan 8, 2012 5:11 PM |
16 | Jim | Franco | 24 | $14.19 | 14% | Jan 14, 2004 11:23 AM |
166 | Brüce Lee | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM |
100 | Brenda Dexter | McMasters | 18 | $55.20 | 15% | Feb 12, 2010 7:23 PM |
55 | Dennís | Bronson | 65 | $123.00 | 32% | Jan 20, 2001 1:12 PM |
9 | Martha | delFuego | 25 | $22.09 | 17% | Jun 11, 2011 10:55 AM |
Demo: Without the Filter Widget
Search/Highlight all columns:
Rank |
First Name |
Last Name |
Age |
Total |
Discount |
Date |
---|---|---|---|---|---|---|
1 | Philip Aaron Wong | Johnson Sr Esq | 25 | $5.95 | 22% | Jun 26, 2004 7:22 AM |
11 | Aáron | Hibert | 12 | $2.99 | 5% | Aug 21, 2009 12:21 PM |
12 | Brandon Clark | Henry Jr | 51 | $42.29 | 18% | Oct 13, 2000 1:15 PM |
111 | Peter | Párker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM |
21 | John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM |
013 | Clark | Kènt Sr. | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
005 | Bruce | Almighty Esq | 45 | $153.19 | 44% | Jan 18, 2021 9:12 AM |
10 | Alex | Dumāss | 13 | $5.29 | 4% | Jan 8, 2012 5:11 PM |
16 | Jim | Franco | 24 | $14.19 | 14% | Jan 14, 2004 11:23 AM |
166 | Brüce Lee | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM |
100 | Brenda Dexter | McMasters | 18 | $55.20 | 15% | Feb 12, 2010 7:23 PM |
55 | Dennís | Bronson | 65 | $123.00 | 32% | Jan 20, 2001 1:12 PM |
9 | Martha | delFuego | 25 | $22.09 | 17% | Jun 11, 2011 10:55 AM |
Page Header
<!-- blue theme stylesheet -->
<link rel="stylesheet" href="css/theme.blue.css">
<!-- tablesorter plugin -->
<script src="js/jquery-latest.min.js"></script>
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>
<!-- jquery.mark.js & tablesorter mark widget loaded after the plugin -->
<script src="js/jquery.mark.js"></script>
<script src="js/widget-mark.js"></script>
CSS
/* Example showing how to change the mark color by column */
tr td:nth-child(1) mark { background: #aa0000; color: #fff; }
tr td:nth-child(2) mark { background: #00aa00; color: #fff; }
tr td:nth-child(3) mark { background: #0000aa; color: #fff; }
tr td:nth-child(4) mark { background: #aaaa00; color: #fff; }
tr td:nth-child(5) mark { background: #00aaaa; color: #fff; }
tr td:nth-child(6) mark { background: #aa00aa; color: #fff; }
Javascript
$(function() {
// ==============================
// WITH filter widget
// ==============================
var $table = $('#table').tablesorter({
theme: 'blue',
widthFixed : true,
// sort & filter diacritics
sortLocaleCompare: true,
widgets: ['zebra', 'filter', 'mark'],
widgetOptions: {
filter_external: 'input[name="keyword"]',
filter_reset: 'button.reset',
// default settings
mark_accuracy: 'partially',
mark_className: '',
mark_debug: false,
mark_diacritics: true,
mark_element: 'mark',
mark_exclude: [],
mark_iframes: false,
mark_log: console,
mark_separateWordSearch: true,
mark_synonyms: {},
// callback functions
mark_done: function(totalMatches) {},
mark_each: function(element) {},
mark_filter: function(node, term, counter, totalCounter) { return true; },
mark_noMatch: function(keyword) {}
}
});
// preset searches for the first table
$('button[data-filter-column]').click(function(){
var filters = [],
$t = $(this),
col = $t.data('filter-column'), // zero-based index, or "all" column
txt = $t.data('filter-text') || $t.text(); // text to add to filter
filters[col === "all" ? $table[0].config.columns : col] = txt;
$.tablesorter.setFilters( $table, filters );
return false;
});
// ==============================
// NO filter widget
// ==============================
var $table2 = $('#table2').tablesorter({
theme: 'blue',
widthFixed : true,
// sort & filter diacritics
sortLocaleCompare: true,
widgets: ['zebra', 'mark'],
widgetOptions : {
// default settings
mark_accuracy: 'partially',
mark_className: '',
mark_debug: false,
mark_diacritics: true,
mark_element: 'mark',
mark_exclude: [],
mark_iframes: false,
mark_log: console,
mark_separateWordSearch: true,
mark_synonyms: {},
// callback functions
mark_done: function(totalMatches) {},
mark_each: function(element) {},
mark_filter: function(node, term, counter, totalCounter) { return true; },
mark_noMatch: function(keyword) {}
}
});
// preset searches on the second table
$('button.table2').click(function(){
// check for reset
var query = $(this).hasClass('reset2') ? '' : this.textContent;
$('#table2-search')
.val(query)
.trigger('input');
});
$('#table2-search').on('input', function() {
var config = $table2[0].config,
filters = [];
// still target the "any" match column
filters[config.columns] = this.value;
// trigger a mark update
$table2.trigger('markUpdate', [filters]);
// or call the function directly
// $.tablesorter.mark.update(config, filters);
});
});