CODEWITHSUNDEEP
javascriptjqueryjquery-isotope
user463231
user463231

Reputation:

jQuery Isotope plugin additive filter

I'm using the isotope filter for sorting a list of templates for a project. Users can choose to filter based on things like column width (2 col, 3 col, 4 col) or type (text, image, video). There are more options but this keeps the example simpler.

The way the filter works right now is that the item has to match all the filter options. I'd like to be able to filter items that match one or more of the filter options.

Secondary question: is there any functionality to allow filtering in steps? So for example, if I could show all the templates that are 2 or 3 column and then filter those results to only text and video templates.

I think this might be outside the scope of the plugin and I may have to write my own filter, find a different plugin (at least for filtering) or change how filtering is presented to users.

Upvotes: 1

Views: 909

Answers (2)

Systembolaget
Systembolaget

Reputation: 2514

You can easily filter for various combinations like shown here http://jsfiddle.net/3nY9V/

Upvotes: 0

cjc343
cjc343

Reputation: 3765

I assume you have various classes applied that you're using for filtering, something like col2, col3, col4 and text, image, video and are currently building up a filter string along the lines of '.col2.image' which gets you every element that spans two columns and is an image. By separating them with a comma, you'll get an OR filter ('.col2, .image') that displays anything that is an image or spans two columns.

To start with, you can now combine these for the second part to create a filter like '.col2.text, .col2.video, .col3.text, .col3.video' however, this can get ugly fast, especially as you increase the number of categories.

To allow for simplification, I modified Isotope to accept an Array of filters and chain them together with multiple filter calls, however, it sounds like it is also possible to pass in a more complex filtering object instead of a string (https://github.com/desandro/isotope/issues/144#issuecomment-4595552) which removes the need to modify Isotope's source. For the example above, this may look something like:

$('.element').filter('.col2, col3').filter('.text, .video')

which is significantly simpler than generating a string of possible combinations.

The docs on .filter (http://api.jquery.com/filter/) provide more information about advanced filtering.

Upvotes: 1

Related Questions