Isotope.js filtering for html table

Question

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.

I don't think the isotope.js plugin will work on HTML tables... I may be wrong. I'd filter the table the old fashioned way, hand code it — Sam Holguin, Apr 16 '14 at 16:05

score 3 · Accepted Answer · edited May 23 '17 at 12:06

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+?

is it necessary to add the isotope class or does it have conflict with a particular jquery im using jquery 1.10.2 — a_miguel6687, Apr 21 '14 at 08:30

Isotope.js filtering for html table

1 Answers1