code-lts / jquery-uitablefilter Goto Github PK
View Code? Open in Web Editor NEWsmall plugin for filtering (hiding) table rows based on their text content
Home Page: https://code-lts.github.io/jquery-uitablefilter/demo/flavorzoom/
License: Other
small plugin for filtering (hiding) table rows based on their text content
Home Page: https://code-lts.github.io/jquery-uitablefilter/demo/flavorzoom/
License: Other
Thank you for this script :)
I'm facing this bug that is driving me insane, every time the filter input text looses focus or on enter it submits as if there was a form of type get and action to filter..
I can't get it to stop that!!
here's my code
var theTable = $('.rows_table');
$("#filter").keyup(function() {
$.uiTableFilter( theTable, this.value );
return null;
});
When you are using the zebra widget on a table, and you filter based on some input (i.e. from the user typing into a text field), sometimes you get two 'odd' or two 'even' colored rows next to each other.
you gotta include the text of the license for your code somewhere to comply with MIT
As for GPL, which version? 2 or 3?
text.indexOf is not a function
[Break On This Error] if (text.indexOf(word) === -1) {
I switched the line from the file:
text = caseSensitive != null ? caseSensitive : {
str: str.toLowerCase()
};
with
var text = caseSensitive ? str : str.toLowerCase();
from the example and its all good.
Any thoughts?
Or should I open a pull request?
Something doesn't seem right with the current block.
Here is a tweak I made so you can search in several columns instead of just one. It assumes 'column' is no more a String but an array of Strings (the desired column's names).
if( column )
{
var index = new Array();
for (var j = 0; j < column.length; j++)
{
jq.find("thead > tr:last > th").each(function(i) {
if ($.trim($(this).text()) == column[j]) {
index[j] = i;
return false;
}
});
}
if( index.length == 0 ) throw("columns not found")
getText = function(elem) {
var selector = "";
for (var i = 0; i < index.length; i++)
{
if (i != 0) {selector += ",";}
selector += "td:eq(" + index[i] + ")";
}
return $(elem.find((selector))).text();
}
}
Hi,
this is a very useful plugin!
I'm trying to give my users the ability to narrow their search by using who input fields. I can't manage the hidden rows to stay hidden when using the second input field.
Any hints?
from github user barclay-reg
59 (new): var elems = jq.children().filter("tbody").children().filter("tr:visible").each(search_text);
63 (new): var elems = jq.children().filter("tbody").children().filter("tr").each(search_text);
My comments:
I think it might be safer and clearer to use (with and without the :visible filter):
find("tbody:first > tr")
does that work for you? Otherwise we could try
find("> tbody:first > tr") (not sure if this is valid)
or
children("tbody").eq(0).children("tr")
I've changed your code to support match notification when a match is found.
You are free to use this code:
/*
- Copyright (c) 2008 Greg Weber greg at gregweber.info
- Dual licensed under the MIT and GPLv2 licenses just as jQuery is:
- http://jquery.org/license
*
- documentation at http://gregweber.info/projects/uitablefilter
*
- allows table rows to be filtered (made invisible)
- <code>
- t = $('table')
- $.uiTableFilter( t, phrase )
- </code>
- arguments:
- jQuery object containing table rows
- phrase to search for
- optional arguments:
- column to limit search too (the column title in the table header)
-
ifHidden - callback to execute if one or more elements was hidden
*/
(function ($) {
$.uiTableFilter = function (jq, phrase, column, ifHidden, notifyMatchHandler) {
var new_hidden = false;
if (this.last_phrase === phrase) return false;
var phrase_length = phrase.length;
var words = phrase.toLowerCase().split(" ");
// these function pointers may change
var matches = function (elem) { elem.show(); if (notifyMatchHandler) notifyMatchHandler(elem); }
var noMatch = function (elem) { elem.hide(); new_hidden = true }
var getText = function (elem) { return elem.text() }
if (column) {
var index = null;
jq.find("thead > tr:last > th").each(function (i) {
if ($.trim($(this).text()) == column) {
index = i; return false;
}
});
if (index == null) throw ("given column: " + column + " not found")
getText = function (elem) {
return $(elem.find(
("td:eq(" + index + ")"))).text()
}
}
// if added one letter to last time,
// just check newest word and only need to hide
if ((words.size > 1) && (phrase.substr(0, phrase_length - 1) ===
this.last_phrase)) {
if (phrase[-1] === " ")
{ this.last_phrase = phrase; return false; }
var words = words[-1]; // just search for the newest word
// only hide visible rows
matches = function (elem) { ; }
var elems = jq.find("tbody:first > tr:visible")
}
else {
new_hidden = true;
var elems = jq.find("tbody:first > tr")
}
elems.each(function () {
var elem = $(this);
$.uiTableFilter.has_words(getText(elem), words, false) ?
matches(elem) : noMatch(elem);
});
last_phrase = phrase;
if (ifHidden && new_hidden) ifHidden();
return jq;
};
// caching for speedup
$.uiTableFilter.last_phrase = ""
// not jQuery dependent
// "" [""] -> Boolean
// "" [""] Boolean -> Boolean
$.uiTableFilter.has_words = function (str, words, caseSensitive) {
var text = caseSensitive ? str : str.toLowerCase();
for (var i = 0; i < words.length; i++) {
if (text.indexOf(words[i]) === -1) return false;
}
return true;
}
})(jQuery);
The data I'm trying to filter is in a form input field inside a table row. uitablefilter seems to ignore it. Is there a workaround?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.