Skip to content

New "dataFilterValue" and "dataNoFilter" options to allow filtering using "data-" HTML5 attributes #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

New "dataFilterValue" and "dataNoFilter" options to allow filtering using "data-" HTML5 attributes #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ $('table').filterTable(); //if this code appears after your tables; otherwise, i
| `quickListGroupTag` | string | '' | Tag name surrounding quick list items (e.g., `ul`) |
| `quickListTag` | string | a | Tag name of each quick list item (e.g., `a` or `li`) |
| `visibleClass` | string | visible | Class applied to visible rows |
| `dataFilterValue` | string | _null_ | Filter elements by a `data-[...]` attribute value instead of text content (only if the attribute exists) |
| `dataNoFilter` | string | _null_ | Do not filter elements with this `data-[...]` attribute (no attribute value is required) |

## Styling

Expand Down
91 changes: 91 additions & 0 deletions examples/filtertable-sample-data-attributes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery.FilterTable Data Attributes Sample</title>
<style>
/* generic table styling */
table { border-collapse: collapse; }
th, td { padding: 5px; }
th { border-bottom: 2px solid #999; background-color: #eee; vertical-align: bottom; }
td { border-bottom: 1px solid #ccc; }

/* filter-table specific styling */
td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); }
</style>
</head>
<body>
<h1>jQuery.FilterTable by Data Attributes Sample</h1>
<p>This is a sample of the <a href="http://sunnywalker.github.com/jQuery.FilterTable">jQuery.FilterTable plugin</a></p>
<p>A <code>data-filter-value</code> attribute is defined for each row on the last name (without first name) and a <code>data-no-filter</code> is defined on the "Terms" cells so they will not be filterable.</p>
<h2>Presidents of the United States of America</h2>
<table>
<thead>
<tr>
<th scope="col" title="President Number">#</th>
<th scope="col">President</th>
<th scope="col">Terms</th>
<th scope="col">Tenure</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td data-filter-value="Washington">George Washington</td><td data-no-filter>two</td><td>1789-1797</td></tr>
<tr><td>2</td><td data-filter-value="Adams">John Adams</td><td data-no-filter>one</td><td>1797-1801</td></tr>
<tr><td>3</td><td data-filter-value="Jefferson">Thomas Jefferson</td><td data-no-filter>two</td><td>1801-1809</td></tr>
<tr><td>4</td><td data-filter-value="Madison">James Madison</td><td data-no-filter>two</td><td>1809-1817</td></tr>
<tr><td>5</td><td data-filter-value="Monroe">James Monroe</td><td data-no-filter>two</td><td>1817-1825</td></tr>
<tr><td>6</td><td data-filter-value="Adams">John Quincy Adams</td><td data-no-filter>one</td><td>1825-1829</td></tr>
<tr><td>7</td><td data-filter-value="Jackson">Andrew Jackson</td><td data-no-filter>two</td><td>1829-1837</td></tr>
<tr><td>8</td><td data-filter-value="Van Buren">Martin Van Buren</td><td data-no-filter>one</td><td>1837-1841</td></tr>
<tr><td>9</td><td data-filter-value="Harrison">William Henry Harrison</td><td data-no-filter>one-partial</td><td>1841</td></tr>
<tr><td>10</td><td data-filter-value="Tyler">John Tyler</td><td data-no-filter>one-partial</td><td>1841-1845</td></tr>
<tr><td>11</td><td data-filter-value="Polk">James Knox Polk</td><td data-no-filter>one</td><td>1845-1849</td></tr>
<tr><td>12</td><td data-filter-value="Taylor">Zachary Taylor</td><td data-no-filter>one-partial</td><td>1849-1850</td></tr>
<tr><td>13</td><td data-filter-value="Fillmore">Millard Fillmore</td><td data-no-filter>one-partial</td><td>1850-1853</td></tr>
<tr><td>14</td><td data-filter-value="Pierce">Franklin Pierce</td><td data-no-filter>one</td><td>1853-1857</td></tr>
<tr><td>15</td><td data-filter-value="Buchanan">James Buchanan</td><td data-no-filter>one</td><td>1857-1861</td></tr>
<tr><td>16</td><td data-filter-value="Lincoln">Abraham Lincoln</td><td data-no-filter>two-partial</td><td>1861-1865</td></tr>
<tr><td>17</td><td data-filter-value="Johnson">Andrew Johnson</td><td data-no-filter>one-partial</td><td>1865-1869</td></tr>
<tr><td>18</td><td data-filter-value="Grant">Ulysses S. Grant</td><td data-no-filter>two</td><td>1869-1877</td></tr>
<tr><td>19</td><td data-filter-value="Hayes">Rutherford Birchard Hayes</td><td data-no-filter>one</td><td>1877-1881</td></tr>
<tr><td>20</td><td data-filter-value="Garfield">James Abram Garfield</td><td data-no-filter>one-partial</td><td>1881</td></tr>
<tr><td>21</td><td data-filter-value="Arthur">Chester Alan Arthur</td><td data-no-filter>one-partial</td><td>1881-1885</td></tr>
<tr><td>22</td><td data-filter-value="Cleveland">Grover Cleveland</td><td data-no-filter>one</td><td>1885-1889</td></tr>
<tr><td>23</td><td data-filter-value="Harrison">Benjamin Harrison</td><td data-no-filter>one</td><td>1889-1893</td></tr>
<tr><td>24</td><td data-filter-value="Cleveland">Grover Cleveland</td><td data-no-filter>one-again</td><td>1893-1897</td></tr>
<tr><td>25</td><td data-filter-value="McKinley">William McKinley</td><td data-no-filter>two-partial</td><td>1897-1901</td></tr>
<tr><td>26</td><td data-filter-value="Roosevelt">Theodore Roosevelt</td><td data-no-filter>two-partial</td><td>1901-1909</td></tr>
<tr><td>27</td><td data-filter-value="Taft">William Howard Taft</td><td data-no-filter>one</td><td>1909-1913</td></tr>
<tr><td>28</td><td data-filter-value="Wilson">Woodrow Wilson</td><td data-no-filter>two</td><td>1913-1921</td></tr>
<tr><td>29</td><td data-filter-value="Harding">Warren Gamaliel Harding</td><td data-no-filter>two-partial</td><td>1921-1923</td></tr>
<tr><td>30</td><td data-filter-value="Coolidge">Calvin Coolidge</td><td data-no-filter>two-partial</td><td>1923-1929</td></tr>
<tr><td>31</td><td data-filter-value="Hoover">Herbert Clark Hoover</td><td data-no-filter>one</td><td>1929-1933</td></tr>
<tr><td>32</td><td data-filter-value="Roosevelt">Franklin Delano Roosevelt</td><td data-no-filter>four-partial</td><td>1933-1945</td></tr>
<tr><td>33</td><td data-filter-value="Truman">Harry S. Truman</td><td data-no-filter>two-partial</td><td>1945-1953</td></tr>
<tr><td>34</td><td data-filter-value="Eisenhower">Dwight David Eisenhower</td><td data-no-filter>two</td><td>1953-1961</td></tr>
<tr><td>35</td><td data-filter-value="Kennedy">John Fitzgerald Kennedy</td><td data-no-filter>two-partial</td><td>1961-1963</td></tr>
<tr><td>36</td><td data-filter-value="Johnson">Lyndon Baines Johnson</td><td data-no-filter>two-partial</td><td>1963-1969</td></tr>
<tr><td>37</td><td data-filter-value="Nixon">Richard Milhous Nixon</td><td data-no-filter>two-partial</td><td>1969-1974</td></tr>
<tr><td>38</td><td data-filter-value="Ford">Gerald Rudolph Ford</td><td data-no-filter>two-partial</td><td>1974-1977</td></tr>
<tr><td>39</td><td data-filter-value="Carter">James Earl Carter, Jr.</td><td data-no-filter>one</td><td>1977-1981</td></tr>
<tr><td>40</td><td data-filter-value="Reagan">Ronald Wilson Reagan</td><td data-no-filter>two</td><td>1981-1989</td></tr>
<tr><td>41</td><td data-filter-value="Bush">George Herbert Walker Bush</td><td data-no-filter>one</td><td>1989-1993</td></tr>
<tr><td>42</td><td data-filter-value="Clinton">William Jefferson Clinton</td><td data-no-filter>two</td><td>1993-2001</td></tr>
<tr><td>43</td><td data-filter-value="Bush">George Walker Bush</td><td data-no-filter>two</td><td>2001-2009</td></tr>
<tr><td>44</td><td data-filter-value="Obama">Barack Hussein Obama</td><td data-no-filter>one</td><td>2009-</td></tr>
</tbody>
</table>
<p><em>Data as of October, 2012.</em></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../jquery.filtertable.min.js"></script>
<script>
$(document).ready(function() {
$('table').filterTable({ // apply filterTable to all tables on this page
dataFilterValue: 'filter-value', // filter elements by a "data-filter-value" value instead of text content
dataNoFilter: 'no-filter' // do not filter elements with this "data-no-filter" if so
});
});
</script>
</body>
</html>
34 changes: 30 additions & 4 deletions jquery.filtertable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,37 @@
*
* Utilizes bindWithDelay() if available. https://github.com/bgrins/bindWithDelay
*
* @version v1.5.2
* @version v1.5.2 (modified)
* @author Sunny Walker, swalker@hawaii.edu
*/
(function($) {
var jversion = $.fn.jquery.split('.'), jmajor = parseFloat(jversion[0]), jminor = parseFloat(jversion[1]);
if (jmajor<2 && jminor<8) { // build the pseudo selector for jQuery < 1.8
$.expr[':'].filterTableFind = function(a, i, m) { // build the case insensitive filtering functionality as a pseudo-selector expression
return $(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
var _match = false,
_tbl = $(a).find('table'),
_tbl_filterby = _tbl.data('filterby'),
_tbl_nofilter = _tbl.data('nofilter');
if (_tbl_filterby && $(a).data(_tbl_filterby)!==undefined) {
_match = String($(a).data(_tbl_filterby)).toUpperCase().indexOf(m[3].toUpperCase())>=0;
} else if (_tbl_nofilter===undefined || $(a).data(_tbl_nofilter)===undefined) {
_match = $(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
}
return _match;
};
} else { // build the pseudo selector for jQuery >= 1.8
$.expr[':'].filterTableFind = jQuery.expr.createPseudo(function(arg) {
return function(el) {
return $(el).text().toUpperCase().indexOf(arg.toUpperCase())>=0;
var _match = false,
_tbl = $(el).closest('table'),
_tbl_filterby = _tbl.data('filterby'),
_tbl_nofilter = _tbl.data('nofilter');
if (_tbl_filterby!==undefined && $(el).data(_tbl_filterby)!==undefined) {
_match = String($(el).data(_tbl_filterby)).toUpperCase().indexOf(arg.toUpperCase())>=0;
} else if (_tbl_nofilter===undefined || $(el).data(_tbl_nofilter)===undefined) {
_match = $(el).text().toUpperCase().indexOf(arg.toUpperCase())>=0;
}
return _match;
};
});
}
Expand All @@ -40,7 +58,9 @@
quickListClass: 'quick', // class of each quick list item
quickListGroupTag: '', // tag surrounding quick list items (e.g., ul)
quickListTag: 'a', // tag type of each quick list item (e.g., a or li)
visibleClass: 'visible' // class applied to visible rows
visibleClass: 'visible', // class applied to visible rows
dataFilterValue: null, // filter elements by a "data-..." value instead of text content
dataNoFilter: null // do not filter elements with this "data-..." if so
},
hsc = function(text) { // mimic PHP's htmlspecialchars() function
return text.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
Expand Down Expand Up @@ -75,6 +95,12 @@
filter = null, // placeholder for the field field DOM node
created_filter = true; // was the filter created or chosen from an existing element?
if (t[0].nodeName==='TABLE' && tbody.length>0 && (settings.minRows===0 || (settings.minRows>0 && tbody.find('tr').length>settings.minRows)) && !t.prev().hasClass(settings.containerClass)) { // only if object is a table and there's a tbody and at least minRows trs and hasn't already had a filter added
if (settings.dataFilterValue!==null) { // if we may filter with a "data-..." value instead of text content
t.data('filterby', settings.dataFilterValue); // add the info to the global table element
}
if (settings.dataNoFilter!==null) { // if we may not filter with a "data-..." value
t.data('nofilter', settings.dataNoFilter); // add the info to the global table element
}
if (settings.filterSelector && $(settings.filterSelector).length===1) { // use a single existing field as the filter input field
filter = $(settings.filterSelector);
container = filter.parent(); // container to hold the quick list options
Expand Down
4 changes: 2 additions & 2 deletions jquery.filtertable.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.