Skip to content

New "quickListSelector" option #15

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 "quickListSelector" option #15

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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ $('table').filterTable(); //if this code appears after your tables; otherwise, i
| `quickListClass` | string | quick | Class of each quick list item |
| `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`) |
| `quickListSelector` | string | _null_ | Use this selector to find the quick list container instead of creating a new one (only works if selector returns a single element) |
| `visibleClass` | string | visible | Class applied to visible rows |

## Styling
Expand Down
105 changes: 105 additions & 0 deletions examples/filtertable-quick-dom-insert.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery.FilterTable Quick List In Existing DOM Element 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; }
table a { text-decoration: none; }
table a:hover { text-decoration: underline; }
tr :last-child { text-align: right; }

/* hide content from view but not from searching */
.hidden { display: none; }

/* filter-table specific styling */
#quicks-container .quick { margin-left: 1em; font-size: 0.8em; text-decoration: none; }
#quicks-container .quick:hover { text-decoration: underline; }
td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); }
</style>
</head>
<body>
<h1>jQuery.FilterTable Quick List In Existing DOM Element Sample</h1>
<p>This is a very plain sample of the <a href="http://sunnywalker.github.com/jQuery.FilterTable">jQuery.FilterTable plugin</a> which shows the usage of the <code>quickList</code> optional parameter.</p>
<p>Quick list may be inserted here: <span id="quicks-container"></span></p>
<h2>Main campuses of the University of Hawai&#699;i System</h2>
<table>
<thead>
<tr>
<th scope="col">Campus</th>
<th scope="col">Island</th>
<th scope="col">Fall 2011<br>Enrollment</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://hilo.hawaii.edu/">University of Hawai&#699;i at Hilo</a></td>
<td>Hawai&#699;i <span class="hidden">neighbor island</span></td>
<td>4,100</td>
</tr>
<tr>
<td><a href="http://manoa.hawaii.edu/">University of Hawai&#699;i at M&#257;noa</a></td>
<td>O&#699;ahu</td>
<td>20,400</td>
</tr>
<tr>
<td><a href="http://westoahu.hawaii.edu/">University of Hawai&#699;i—West O&#699;ahu</a></td>
<td>O&#699;ahu</td>
<td>1,600</td>
</tr>
<tr>
<td><a href="http://hawaii.hawaii.edu/">Hawai&#699;i Community College</a></td>
<td>Hawai&#699;i <span class="hidden">neighbor island</span></td>
<td>3,900</td>
</tr>
<tr>
<td><a href="http://honolulu.hawaii.edu/">Honolulu Community College</a></td>
<td>O&#699;ahu</td>
<td>4,600</td>
</tr>
<tr>
<td><a href="http://kapiolani.hawaii.edu/">Kapi&#699;olani Community College</a></td>
<td>O&#699;ahu</td>
<td>9,000</td>
</tr>
<tr>
<td><a href="http://kauai.hawaii.edu/">Kaua&#699;i Community College</a></td>
<td>Kaua&#699;i <span class="hidden">neighbor island</span></td>
<td>1,400</td>
</tr>
<tr>
<td><a href="http://leeward.hawaii.edu/">Leeward Community College</a></td>
<td>O&#699;ahu</td>
<td>7,900</td>
</tr>
<tr>
<td><a href="http://maui.hawaii.edu/">Maui College</a></td>
<td>Maui <span class="hidden">neighbor island</span></td>
<td>4,500</td>
</tr>
<tr>
<td><a href="http://windward.hawaii.edu/">Windward Community College</a></td>
<td>O&#699;ahu</td>
<td>2,700</td>
</tr>
</tbody>
</table>
<p>Note that while the filter is case-insensitive, it is UTF-8 aware so searching for <code>oahu</code> will not find <code>O&#699;ahu</code>.</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
quickList: ['Oʻahu', 'Hawaiʻi', 'university', 'college', 'neighbor island'], // add some shortcut searches
quickListSelector:'#quicks-container' // existing quick list container
});
});
</script>
</body>
</html>
11 changes: 8 additions & 3 deletions jquery.filtertable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*
* Utilizes bindWithDelay() if available. https://github.com/bgrins/bindWithDelay
*
* @version v1.5.2
* @version v1.5.2 (modified)
* @author Sunny Walker, [email protected]
*/
(function($) {
Expand Down Expand Up @@ -40,6 +40,7 @@
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)
quickListSelector: null, // selector for an existing quick list container
visibleClass: 'visible' // class applied to visible rows
},
hsc = function(text) { // mimic PHP's htmlspecialchars() function
Expand Down Expand Up @@ -106,7 +107,11 @@
container.append(filter);
}
if (settings.quickList.length>0) { // are there any quick list items to add?
quicks = settings.quickListGroupTag ? $('<'+settings.quickListGroupTag+' />') : container;
if (settings.quickListSelector && $(settings.quickListSelector).length===1) {
quicks = $(settings.quickListSelector); // get the existing container tag for the quick list
} else {
quicks = settings.quickListGroupTag ? $('<'+settings.quickListGroupTag+' />') : container;
}
$.each(settings.quickList, function(index, value) { // for each quick list item...
var q = $('<'+settings.quickListTag+' class="'+settings.quickListClass+'" />'); // build the quick list item link
q.text(hsc(value)); // add the item's text
Expand All @@ -119,7 +124,7 @@
});
quicks.append(q); // add the quick list link to the quick list groups container
}); // each quick list item
if (quicks!==container) {
if (quicks!==container && (settings.quickListSelector===null || $(settings.quickListSelector).length==0)) {
container.append(quicks); // add the quick list groups container to the DOM if it isn't already there
}
} // if quick list items
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.