CODEWITHSUNDEEP
javascriptjqueryjquery-isotope
Laci K
Laci K

Reputation: 595

jQuery Isotope order by number sorts items incorrectly

I set up Isotope order and sort on my site but if I change the ordering to number it sorts items wrong.

for example I have items like this:

<div class="boxm" data-name="aaa" data-number="11944"></div>
<div class="boxm" data-name="bbb" data-number="1494"></div>
<div class="boxm" data-name="ccc" data-number="1574"></div>
<div class="boxm" data-name="ddd" data-number="1892"></div>
<div class="boxm" data-name="eee" data-number="19520"></div>
<div class="boxm" data-name="fff" data-number="2090"></div>
<div class="boxm" data-name="fgf" data-number="9010"></div>

with the Isotope code like this:

$container.isotope({
        itemSelector : '.boxm',
        masonry : {
            columnWidth : 67,
            cornerStampSelector: '.corner-stamp'
        },
        getSortData : {
            name : function($elem){
                return $elem.attr('data-name');
            },
            number : function($elem){
                return $elem.attr('data-number');
            }
        }
    });
$sortLinks.click(function(){
        var $this = $(this);
        if($this.hasClass('selected')){
            return false;
        }
        var $isSet = $this.parents('.option-set');
        $isSet.find('.selected').removeClass('selected');
        $this.addClass('selected');

        var options = {},
            key = $isSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        value = value === 'false' ? false : value;
        options[key] = value;
        if(key === 'layoutMode' && typeof changeLayoutMode === 'function'){
            changeLayoutMode($this, options)
        }else {
            $container.isotope(options);
        }

        return false;

    });

if I press order by number it will order the same as I typed in here and if I press sort by DESC than it will start with 9010 folowed by 2090. if I'm right this is because Isotope watches only the first two character but I need to order it correctly.

How can I solve this problem?

Upvotes: 1

Views: 4532

Answers (2)

jtheman
jtheman

Reputation: 7491

It is probably because that the value of the data-number attribute is not considered an integer value but a string. Try this:

number : function($elem){
            parseInt($elem.attr('data-number'), 10);
        }

Numbers stored in strings are sorted in a not always logic way, ie 199999 is less than 2 because of the initial digit.

(thanks balexandre for the comment about adding the base)

Upvotes: 3

Neeraj
Neeraj

Reputation: 8532

getSortData : {
            name : function($elem){
                return $elem.attr('data-name');
            },
            number : function($elem){
                return $elem.attr('data-number');
            }
        }

You are returning a string here

change return $elem.attr('data-number'); to return parseInt($elem.attr('data-number'));

This should solve the issue.

Upvotes: 1

Related Questions