Isotope sort item by data attribute

Question

I am trying to use getSortData for isotope. I am using data attribute as sort number. It works fine while my data attributes are bellow 10. Works only for 0-9 numbers. In this example I am showing my code where the last item has data-order 12. Isotope uses this as 1 and sort wrongly.

This is my HTML:

<div class="isotope">
    <div data-order="0" class="box"></div>
    <div data-order="1" class="box"></div>
    <div data-order="2" class="box"></div>
    <div data-order="12" class="box"></div>
</div>

And this is JS:

$grid = $('.isotope');
$grid.each(function(index, el) {
    $(this).isotope({
        itemSelector : '.box',
        layoutMode : 'masonry',
        masonry: {
            gutter: 20,
            isFitWidth: true
        },
        getSortData: {
            category: '[data-order]'
        },
        sortBy : 'category'
    });

});

Answer 1

Isotope simply had no idea that it is in fact a number, so we need to kinda say it to him.

$( document ).ready( function() {
  $grid = $('.isotope');
  $grid.each(function(index, el) {
    $(this).isotope({
        itemSelector : '.box',
        layoutMode : 'masonry',
        masonry: {
            gutter: 20,
            isFitWidth: true
        },
        getSortData: {
            category: '[data-order] parseInt'
        },
        sortBy : 'category'
    });

 });
});

snippet: http://codepen.io/anon/pen/gaEBza

source: http://isotope.metafizzy.co/methods.html