Sponsored Links
jQuery Tutorials
- jQuery Table Manipulation
- jQuery Reference
- jQuery Sorting
- jQuery - JavaScript Sorting
- jQuery - Basic Alphabetical Sorting
- jQuery - The Power of Plug-ins
- jQuery - Finessing the Sort Key
- jQuery - Sorting Other Types of Data
- jQuery - Column Highlighting
- jQuery Pagination
- jQuery - JavaScript Pagination
- jQuery - Enabling the Pager Buttons
- jQuery - Marking the Current Page
- jQuery Completed sorting and paging code
- jQuery Advanced Row Striping
- jQuery Three-color Alternating Pattern
- jQuery Alternating Triplets
- jQuery Row Highlighting
- jQuery Tooltips
- jQuery Collapsing and Expanding Table Rows
Home
Tutorials
jQuery
Tutorials
jQueryjQuery Collecting Filter Options
jQuery Collecting Filter Options from Content
Now we need to expand the filter options to cover the range of available topics in the table. Rather than hard-coding all of the topics, we can gather them from the text that has been entered in the table. We can change the definition of keywords to read:
Sample Code
- var keywords = {}
- $table.find('tbody tr td').filter(':nth-child(' + (column + 1) +
- ')').each(function() {
- keywords[$(this).text()] = $(this).text()
- })
Copyright exforsys.com
This code relies on two tricks:
- By using a map rather than an array to hold the keywords as they are found, we eliminate duplicates automatically.
- jQuery's $.each() function lets us operate on arrays and maps identically, so no later code has to change. Now we have a full complement of filter options:

Reversing the Filters
For completeness, we need a way to get back to the full list after we have filtered it.
Adding an option for all topics is pretty straightforward:
Sample Code
- $('</p><br>
- <div class="filter">all</div>
- ').click(function() {
- $table.find('tbody tr').show()
- $(this).addClass('active').siblings().removeClass('active')
- }).addClass('clickable active').appendTo($filters)
Copyright exforsys.com
This gives us an all button that simply shows all rows of the table again. For good measure we mark it as active to begin with.
Read Next: jQuery Interacting with Other Code
Comments
Sponsored Links
