Isotope: reset all combination filters

Question

I have an isotope combination filter setup with a number of data-filter-group's, each with a rest/show all list item:

<li><a href="#" data-filter="*">Show all</a></li>

Is a way to reset all the data-filter-group's - a 'reset-all' link?

My current javascript is:

        var $container = $('.content ul.sort'),
            filters = {};

        $container.isotope({
          itemSelector : '.dynamic-filter'
        });

        // filter buttons
        $('.filter a').click(function(){
          var $this = $(this);
          // don't proceed if already selected
          if ( $this.hasClass('selected') ) {
            return;
          }

          var $optionSet = $this.parents('.option-set');
          // change selected class
          $optionSet.find('.selected').removeClass('selected');
          $this.addClass('selected');

          // store filter value in object
          // i.e. filters.color = 'red'
          var group = $optionSet.attr('data-filter-group');
          filters[ group ] = $this.attr('data-filter-value');
          // convert object into array
          var isoFilters = [];
          for ( var prop in filters ) {
            isoFilters.push( filters[ prop ] )
          }
          var selector = isoFilters.join('');
          $container.isotope({ filter: selector });

          return false;
        });

Any idea's?

<-- Edit -->

Appear to have found an answer to my own question:

        $(".isotope-reset").click(function(){
        $(".content ul.sort").isotope({
            filter: '*'
        });
    });

put your answer in an actual answer, so you can select it and people can upvote it — Jacob Raccuia, Oct 07 '13 at 14:13

score 19 · Answer 1 · answered Dec 03 '13 at 14:22

19

As the poster didn't put his answer in an answer, here it is for people who get to this question and don't see that there's an answer

Following code resets isotop filter:

$(".isotope-reset").click(function(){
    $(".content ul.sort").isotope({
        filter: '*'
    });
});

answered Dec 03 '13 at 14:22

Kristof Feys

1,782
1
17
35

You can also add an extra line to remove the "selected" class within that very same click-function, like this for instance: `$('ul.isotope-options li a').removeClass('selected');` – cptstarling Jul 18 '16 at 12:40

score 3 · Answer 2 · answered Oct 13 '15 at 00:29

I was looking for something similar, thought I would put the answer on here just in case another searcher came across this question. My problem with the solution the poster mentioned is that for me at least, it didn't do a true reset. I wanted the buttons to reset as well as the filter. Also I was getting a strange bug where after hitting the reset button, my filters weren't acting right.

The script below solved all my problems (at the date of this answer, lol). Source: https://github.com/metafizzy/isotope/issues/928

  var $anyButtons = $('.filters').find('button[data-filter=""]');
  var $buttons = $('.filters button');

  $('.button--reset').on( 'click', function() {
    // reset filters
    filters = {};
    $grid.isotope({ filter: '*' });
    // reset buttons
    $buttons.removeClass('is-checked');
    $anyButtons.addClass('is-checked');
  });

Isotope: reset all combination filters

2 Answers2

Linked