HTMLのlistのソートや絞り込みが出来るjsライブラリ「List.js」



Webシステム内でlist内のソートや絞り込みをする場合はどうしていますか?

データベースが絡んでくるシステムなら、URLのquery string内に"desc"や"asc"等のパラメーターをつけて"OrderBy"でソート、絞り込み検索する場合は"Like文"を使って絞り込むのが一般的かと思われます。

データ数が膨大な場合や検索する項目が明確な場合は上記の方法で問題ありませんが、数十件程度のデータではデータベースに問い合わせるより、DOM内でソートやフィルターを掛けたほうがリソースの節約になります。

jQuery等のライブラリを使って力技でソートやフィルターを掛ける方法もありますが、少々手間が掛かることに。。

そんなDOMベースの並び替えですが、htmlのリストやテーブル内データの並び替えや検索が簡単に出来るjavascriptライブラリが"List.js"です。

また、List.jsは特定のjavascriptライブラリにも依存していないので既存のサイトにも簡単に導入することが出来ます。

* 右がList.jsを使って絞り込みをした結果


List.jsのインストール

List.jsのインストールにはサイトからライブラリをダウンロードするか、コマンドラインからのインストールに対応しています。

# npmを使う場合
npm install list.js

# bowerを使う場合
bower install list.js

# cdnを使う場合
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>


List.jsの使い方

List.jsの使い方もシンプルで既存のListが出来上がっていれば簡単に使うことが出来ます。また、html内に以下のIDやクラスを定義して僅かなjavascriptコードで導入が可能。

- ターゲットとなるid
- 検索(絞り込み)をするインプットフォームのclass
- sortボタンのid  * buttonタグでなくても可
- listのclass ( liタグを使っていますがtableタグを対象にすることも可能 )
- 検索対象のデータのクラス

<!-- HTML側のコード -->

<!-- ターゲットとなるid  -->
<div id="itemLists">
  <!--  クラス"search"が検索のフォームに -->
  <input type="text" class="search" placeholder="キーワードで絞り込み">
  
  <!-- クラス"sort"が並び替えのボタンに -->
  <!-- data-sortのがソートするデータの対象 *今回は'lang'が対象  -->
  <button class="sort" data-sort="lang">言語で並び替え</button>
  
  <!-- クラス'list'でデータのリスト -->
  <ul class="list">
    
    <li>
      <!-- データ対象: "framework"  -->
      <h3 class="framework">Laravel</h3>
      <!-- データ対象: "lang"  -->
      <p class="lang">php</p>
    </li>
    
    <li>
      <h3 class="framework">Django</h3>
      <p class="lang">python</p>
    </li>
    
  </ul>
  <!-- !End: .list  -->
  
</div>
<!-- !End: #itemList -->

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>


javascript側もターゲットとなるid名と対象となるデータのクラス名を入れるだけなので、数行のコードで済ませることが出来ます。

<script type="text/javascript">

var options = {
  // 検索するターゲットデータ
  valueNames: [ 'framework', 'lang' ]
};

// ターゲットとなるID
var itemList = new List('itemLists', options);

</script>


基本的なことは以上で終わりです。
( 下は実際にList.jsを使ったデモ )

See the Pen EKZOYQ by cupof (@cupof-github) on CodePen.


デフォルトでは'search'や'list'や'sort'の様にクラス名が決まっていますが、javascript側でclass名の変更も可能です。

var options = {
  // 検索するターゲットデータ
  valueNames: [ 'framework', 'lang' ],
  // list対象のクラス名を変更したい場合
  listClass: "yourListClassName", // default: list
  // searchクラス名を変更したい場合
  searchClass: "yourSearchClassName", // default: search
  // sortクラス名を変更したい場合
  sortClass: "yourSortClass" // default: sort
};

// ターゲットとなるID
var itemList = new List('itemLists', options);


Summary

これでList.jsの紹介は終わりです。

AngularやVue等のフロントエンドフレームワークを導入し、データバインディング機能を使う方法もありますが、「フレームワークをわざわざ導入する程でもないんだけど。。」というサイトにList.jsはピッタリです。

また、専用のpaginationプラグインも用意されているので気になった人はチェックしてみてください!

GitHub: javve/list.js

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ