Is isotope filtering working for HTML Tables? What I want to do is filter using a search form, so my contacts list will be filtered based on the value of the search box . Here is my sample fiddle for this Fiddle and my sample code for isotope:
var $container = $('.rm-data').isotope({
// options
});
$('#search').on('keypress', function (e) {
if (e.which == 13) {
var query = $('#search').val();
$container.isotope({
filter: query
});
console.log(query);
}
});
Thanks for any suggestions.
Isotope seems to mess up the table formatting, but it seems to work ok. You were very close to being able to match based on names.
<tbody="rm-data">
Needs to be
<tbody class="rm-data">
And then add a dot in front of your query so it will filter on class names
$container.isotope({ filter: "."+query });
And then it works. Fiddle: http://jsfiddle.net/HEdc2/4/
However if you're looking to be able to search the contents of any cell in the table, you'll need a fancier filter.
$('#search').on('keypress',function(e){
if(e.which == 13){
var query = $('#search').val();
query = "tr:contains("+query+")";
$container.isotope({ filter: query });
console.log(query);
}
});
Seems to do the trick. http://jsfiddle.net/HEdc2/5/
However, jQuery's :contains()
selector is case sensitive, so if you want a case insensitive search you'll have to to figure something out. Answers to this question may help: How do I make jQuery Contains case insensitive, including jQuery 1.8+?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.