initial commit
This commit is contained in:
Kyo Nagashima
commit
f3498ff5af
2 changed files with 217 additions and 0 deletions
89
jquery.table-filter.js
Normal file
89
jquery.table-filter.js
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
/**
|
||||
* jQuery Plugin: Table Filter - version 0.1.1
|
||||
* Insert a input form for filtering rows dinamically.
|
||||
*
|
||||
* Copyright (c) 2009 Kyo Nagashima <kyo@hail2u.net>
|
||||
* This library licensed under MIT license:
|
||||
* http://opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Usage:
|
||||
* Insert to all table
|
||||
* $("table").addTableFilter();
|
||||
*
|
||||
* Insert to "#table1" only
|
||||
* $("#table1").addTableFilter();
|
||||
*
|
||||
* Insert with custom label text and size
|
||||
* $("table").addTableFilter({
|
||||
* labelText: "Filtering Words: ",
|
||||
* size: 48
|
||||
* });
|
||||
*
|
||||
* Styling:
|
||||
* You can style inserted elements like this:
|
||||
* .formTableFilter {
|
||||
* text-align: right;
|
||||
* }
|
||||
*
|
||||
* .formTableFilter label {
|
||||
* font-weight: bold;
|
||||
* }
|
||||
*
|
||||
* .formTableFilter input {
|
||||
* border: 1px solod #999999;
|
||||
* width: 12em;
|
||||
* color: #ffffff;
|
||||
* background-color: #333333;
|
||||
* }
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
$.fn.addTableFilter = function (options) {
|
||||
var o = $.extend({}, $.fn.addTableFilter.defaults, options);
|
||||
|
||||
if (this.is("table")) {
|
||||
// Generate ID
|
||||
if (!this.attr("id")) {
|
||||
this.attr({
|
||||
id: "t-" + Math.floor(Math.random() * 99999999)
|
||||
});
|
||||
}
|
||||
var tgt = this.attr("id");
|
||||
var id = tgt + "-filtering";
|
||||
|
||||
// Build filtering form
|
||||
var label = $("<label/>").attr({
|
||||
"for": id
|
||||
}).append(o.labelText);
|
||||
var input = $("<input/>").attr({
|
||||
id: id,
|
||||
type: "text",
|
||||
size: o.size
|
||||
});
|
||||
$("<p/>").addClass("formTableFilter").append(label).append(input).insertBefore(this);
|
||||
|
||||
// Bind filtering function
|
||||
$("#" + id).keyup(function (e) {
|
||||
var words = this.value.toLowerCase().split(" ");
|
||||
$("#" + tgt + " tbody tr").each(function () {
|
||||
var s = $(this).html().toLowerCase().replace(/<.+?>/g, "").replace(/\s+/g, " ");
|
||||
var state = 0;
|
||||
$.each(words, function () {
|
||||
if (s.indexOf(this) < 0) {
|
||||
state = 1;
|
||||
return false; // break $.each()
|
||||
}
|
||||
});
|
||||
state ? $(this).hide() : $(this).show();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
$.fn.addTableFilter.defaults = {
|
||||
labelText: "Keyword(s): ",
|
||||
size: 32
|
||||
};
|
||||
})(jQuery);
|
||||
128
test.html
Normal file
128
test.html
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Test page for Table Filter</title>
|
||||
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
|
||||
<script type="text/javascript">
|
||||
google.load("jquery", "1.3.2");
|
||||
</script>
|
||||
<script type="text/javascript" src="jquery.tablefilter.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("table").addTableFilter();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Lorem Ipsum</th>
|
||||
<th>Dolor Sit Amet</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Ut egestas consectetur elit</td>
|
||||
<td>sit amet sollicitudin ligula euismod at</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Integer non purus libero</td>
|
||||
<td>nec pellentesque lorem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sed posuere est ac arcu</td>
|
||||
<td>feugiat placerat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivamus lobortis nisi sit</td>
|
||||
<td>amet purus sollicitudin congue</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suspendisse euismod lectus</td>
|
||||
<td>nec neque viverra vulputate</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Duis sed velit ante</td>
|
||||
<td>in pellentesque erat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vestibulum eu diam sed ipsum</td>
|
||||
<td>luctus sollicitudin at sit amet lorem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cras rutrum sem non quam porttitor</td>
|
||||
<td>eu consectetur tortor tristique</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cras dapibus interdum turpis</td>
|
||||
<td>convallis tincidunt elit lobortis sed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nam consectetur eros vitae dui</td>
|
||||
<td>rutrum ac porttitor felis pharetra</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pellentesque ut velit libero</td>
|
||||
<td>quis sodales ligula</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Integer at enim non</td>
|
||||
<td>enim vestibulum sodales</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Curabitur sagittis libero</td>
|
||||
<td>ultricies mi interdum dictum</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donec pretium tincidunt libero</td>
|
||||
<td>a rutrum dui venenatis ac</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivamus ut nunc dolor</td>
|
||||
<td>vitae volutpat urna</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Morbi malesuada sagittis dolor</td>
|
||||
<td>nec porta nisi convallis at</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nullam luctus pretium mauris</td>
|
||||
<td>quis adipiscing nibh convallis vitae</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Maecenas vel felis tortor</td>
|
||||
<td>nec pulvinar dolor</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nunc ut arcu vitae ligula</td>
|
||||
<td>ullamcorper malesuada id vitae ligula</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivamus condimentum laoreet est</td>
|
||||
<td>sed luctus tortor laoreet non</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aliquam eget arcu turpis</td>
|
||||
<td>pretium faucibus ante</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vestibulum quis nisi quis</td>
|
||||
<td>enim tincidunt vulputate</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>In a odio iaculis</td>
|
||||
<td>justo sollicitudin porttitor</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aliquam id felis eu tortor</td>
|
||||
<td>ornare vehicula</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Praesent consequat dui at justo</td>
|
||||
<td>gravida ac mollis elit placerat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue