jqueryでソート、フィルタリング。テーブル以外でも動くisotopeの使い方

2015年7月15日更新 view: 166 view

isotopeでソートやフィルタリングを極める

jqueryを使ったテーブルソートなどはたくさんあるが、今回はul li タグや divタグでもソートすることができる isotope をご紹介。

まずはjqueryとisotopeを読み込もう。

<script src="/js/isotope.pkgd.min.js"></script>
スポンサードリンク

つづいてhtmlソース。
これだけで基本動くはず。

<script>


$(function () {

//テキスト絞込用
var qsRegex;


var filterFns = {
// 点数が50点以上のみ
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// spanタグがないもののみ
nospan: function() {
var number = $(this).find('.number').html();
return number.match("span");

}
};

var $grid = $('.grid').isotope({
//transitionDuration: 0,//0 にすることでアニメーションをオフ
layoutMode: 'vertical',//縦に
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',//parseInt で数値として並び替え
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
},
sortAscending: {
name: false,//並び替えの順番
number: false//並び替えの順番
},
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});

// キーワードで絞り込み検索
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}, 200 ) );

function debounce( fn, threshold ) {
var timeout;
return function debounced() {
if (timeout) {
clearTimeout(timeout);
}
function delayed() {
fn();
timeout = null;
}

timeout = setTimeout(delayed, threshold || 100);
}
}



//ソート、絞り込み完了時に呼ばれる
function onArrange() {
console.log('arrange done');
}
$grid.on( 'arrangeComplete', onArrange );

// 並び替え
$('.sort-by-button-group').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
console.log(sortByValue);
$grid.isotope({
sortBy: sortByValue,
//sortAscending: false//ソート順 多 > 少
});
});

//絞込

// jQueryを使って、クリックイベントを追加
$('#shibori').on( 'click', 'button', function() {
//クリックしたボタンのdata-filterの値を変数に格納します
var filterValue = $(this).attr('data-filter');
filterValue = filterFns[ filterValue ] || filterValue;
console.log("絞込" + filterValue);
//ここでオプションのfilterを発動させています。
//date-filterの値を使ってフィルタリングを行います。
$grid.isotope({ filter: filterValue });
});

});

</script>

<hr/>

<h3>検索</h3>



<p><input type="text" class="quicksearch" placeholder="Search" /></p>

<h3>絞込み</h3>
<div id="shibori" class="button-group">
<button data-filter="*">男女とも表示</button>
<button data-filter=".boy">男の子だけ表示</button>
<button data-filter=".girl">女の子だけ表示</button>
<button data-filter=":not(.boy)">男の子以外</button>
<button data-filter="numberGreaterThan50">50点以上</button>
<button data-filter="nospan">spanタグ無しのみ</button>
</div>

<h3>ソート</h3>
<div class="button-group sort-by-button-group">
<button data-sort-by="original-order">初期値</button>
<button data-sort-by="name">名前</button>
<button data-sort-by="symbol">symbol</button>
<button data-sort-by="number">点数</button>
<button data-sort-by="weight">体重</button>
<button data-sort-by="category">男女別</button>

</div>


<ul class="grid">
<li class="element-item boy">
<h2 class="name">太郎</h2>
<p class="number">70</p>
<h3 class="symbol">zzz</h3>
<p class="weight">50.11</p>
</li>
<li class="element-item boy">
<h2 class="name">ken</h2>
<p class="number"><span>↑</span>61</p>
<h3 class="symbol">yyy</h3>
<p class="weight">60.11</p>
</li>
<li class="element-item girl">
<h2 class="name">hanako</h2>
<p class="number">48</p>
<h3 class="symbol">ccc</h3>

<p class="weight">70.11</p>
</li>
<li class="element-item girl">
<h2 class="name">yume</h2>
<p class="number">95</p>
<h3 class="symbol">ddd</h3>
<p class="weight">80.11</p>
</li>
</ul>

スポンサードリンク

関連記事

関連カテゴリ