diff --git a/README.md b/README.md new file mode 100644 index 0000000..532c250 --- /dev/null +++ b/README.md @@ -0,0 +1,56 @@ +TITLE +===== + +jQuery Plugin: Table Filter - version 0.2 + + +DESCRIPTION +=========== + +Insert a input form for filtering table rows dinamically. + + +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; + } + + +LICENSE +======= + +MIT: http://hail2u.mit-license.org/2009 diff --git a/jquery.table-filter.js b/jquery.table-filter.js new file mode 100644 index 0000000..89bd1d6 --- /dev/null +++ b/jquery.table-filter.js @@ -0,0 +1,90 @@ +/** + * @preserve jQuery Plugin: Table Filter - version 0.2.1 + * + * LICENSE: http://hail2u.mit-license.org/2009 + */ + +/*jslint indent: 2, browser: true, regexp: true */ +/*global jQuery, $ */ + +(function ($) { + "use strict"; + + $.fn.addTableFilter = function (options) { + var o = $.extend({}, $.fn.addTableFilter.defaults, options), + tgt, + id, + label, + input; + + if (this.is("table")) { + // Generate ID + if (!this.attr("id")) { + this.attr({ + id: "t-" + Math.floor(Math.random() * 99999999) + }); + } + tgt = this.attr("id"); + id = tgt + "-filtering"; + + // Build filtering form + label = $("").attr({ + "for": id + }).append(o.labelText); + input = $("").attr({ + id: id, + size: o.size + }).on('click', function () { + $(this).keyup(); + }); + $("
").addClass("formTableFilter").append(label).append(input).insertBefore(this); + + // Bind filtering function + $("#" + id).delayBind("keyup", function (e) { + var words = $(this).val().toLowerCase().split(" "); + $("#" + tgt + " tbody tr").each(function () { + var s = $(this).html().toLowerCase().replace(/<.+?>/g, "").replace(/\s+/g, " "), + state = 0; + $.each(words, function () { + if (s.indexOf(this) < 0) { + state = 1; + return false; // break $.each() + } + }); + + if (state) { + $(this).hide(); + } else { + $(this).show(); + } + }); + }, 300); + } + + return this; + }; + + $.fn.addTableFilter.defaults = { + labelText: "Keyword(s): ", + size: 32 + }; + + $.fn.delayBind = function (type, data, func, timeout) { + if ($.isFunction(data)) { + timeout = func; + func = data; + data = undefined; + } + + var self = this, + wait = null, + handler = function (e) { + clearTimeout(wait); + wait = setTimeout(function () { + func.apply(self, [$.extend({}, e)]); + }, timeout); + }; + + return this.bind(type, data, handler); + }; +}(jQuery)); diff --git a/index.html b/test.html similarity index 100% rename from index.html rename to test.html