CODEWITHSUNDEEP
jquerysortingjquery-isotope
Chozen
Chozen

Reputation: 299

jQuery & Isotope sort by numbers within an element

I'm having trouble trying to figure out how to do specific type of sorting, usually I would sort by a class id but this time I'm trying to achieve something different.

OK here's the example code:

<div class="points-wrapper">

<span class="rewards-points">
        <span data-bind="text: $data.Points">1000</span> Points
</span>

<span class="rewards-points">
        <span data-bind="text: $data.Points">5000</span> Points
</span>

<span class="rewards-points">
        <span data-bind="text: $data.Points">5000</span> Points
</span>

</div>

Sorting Buttons below.

<div id="sorts" class="button-group">
  <button class="button is-checked" data-sort-value="original-order">original order</button>
  <button class="button" data-sort-value="points">500</button>
  <button class="button" data-sort-value="points">1000</button>
  <button class="button" data-sort-value="points">2000</button>
  <button class="button" data-sort-value="points">3000</button>
  <button class="button" data-sort-value="points">5000</button>
</div>

This is a smaller example of what I'm actually working on, the real one has about 30 different items all with various points count.

I'm trying to figure out how to sort according to the points count within the span. Options would be something along the lines of "0 - 1000", "1000 - 5000", "5000 - "10000" etc.

How can sort that using jQuery and Isotope.js?

Upvotes: 3

Views: 4076

Answers (1)

RemarkLima
RemarkLima

Reputation: 12037

* SORTING *

So I assume the rewards-points class is your isotope item, hence:

var container = $('#container').isotope({
itemSelector: '.rewards-points',  
  layoutMode: 'masonry',
    getSortData: {
        points: function(item){
            return parseFloat($(item).find(".number").text());
        }
    }
});

container.isotope({ sortBy: 'points' });

The getSortData function returns a value for Isotope to sort by, then the sortBy is set to the name we set in the getSortData function.

Details here: http://isotope.metafizzy.co/sorting.html

* SORTING WITH FILTERING *

You'll need to use the filter function, like so:

$(".button").click(function(e) {
    if($(this).text() == "All"){
        container.isotope({ filter: function() { return true; } });
    }
    else
    {
        var btnVal = parseFloat($(this).text());
        container.isotope({ filter: function() {
            var itemVal = parseFloat($(this).find(".number").text());
            return btnVal == itemVal;
        }});
    }

});

See: http://isotope.metafizzy.co/filtering.html

I think that should sort it... but I would say if you can change your markup, use the data attributes to hold values, and classes to hold the selectors and it'll make working with isotope much easier!

Update fiddle here: http://jsfiddle.net/Y59S2/3/

Again, tiding up your HTML would make it significantly easier, so something to consider.

Upvotes: 3

Related Questions