Web開発
CSSHTMLJavascript

【JavaScript】テーブルにソート機能やフィルタリング機能、ページング機能を簡単に追加するList.jsの使い方

スポンサーリンク

概要

「List.js」というライブラリを使用することで、テーブルに、ソート機能、フィルタリング機能、ページング機能を簡単に追加することができます。

その、「List.js」の使い方です。

List.js

List.js

Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.

listjs.com

サンプル

以下は実装のサンプルです。

See the Pen List.jsのサンプル by take it easy (@take-it-easy) on CodePen.

ライブラリの読み込み

ダウンロードする場合

  1. List.jsのダウンロードページより「list.min.js」をダウンロードします。

ダウンロードボタンをクリックしてもファイルが開くだけの場合は、ボタンを右クリックして「リンク先を別名で保存」で保存します。

  1. ダウンロードした「list.min.js」を任意の場所に配置してheadタグの中に以下のタグを入れます。
<!-- List.js -->
<!-- JavaScript -->
<script src="js/list.min.js"></script>

パスは環境によって異なると思いますので、環境に合わせて修正をしてください。

CDNの場合

List.jsのDownloadページに、CDNの情報が掲載されています。headタグの中にタグを記入します。

<!-- JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>

List.jsの使い方

テーブルにソート機能をつける方法

HTML

<div id="table">
  <table>
    <thead>
      <tr>
        <th class="sort" data-sort="name">名前</th>
        <th class="sort" data-sort="age">年齢</th>
        <th class="sort" data-sort="place">出身</th>
        <th class="sort" data-sort="sex">性別</th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <td class="name">田中</td>
        <td class="age">24</td>
        <td class="place">福岡</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">鈴木</td>
        <td class="age">22</td>
        <td class="place">熊本</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">佐藤</td>
        <td class="age">30</td>
        <td class="place">鹿児島</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">高橋</td>
        <td class="age">27</td>
        <td class="place">宮崎</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">伊藤</td>
        <td class="age">33</td>
        <td class="place">大分</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">渡辺</td>
        <td class="age">24</td>
        <td class="place">佐賀</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">中村</td>
        <td class="age">29</td>
        <td class="place">長崎</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">山本</td>
        <td class="age">25</td>
        <td class="place">熊本</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">青木</td>
        <td class="age">30</td>
        <td class="place">宮崎</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">村上</td>
        <td class="age">24</td>
        <td class="place">熊本</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">山田</td>
        <td class="age">31</td>
        <td class="place">鹿児島</td>
        <td class="sex">男</td>
      </tr>
    </tbody>
  </table>
</div>

1行目のテーブルを括っているdiv要素にidを設定します。（今回はわかりやすく”table”としています）

5~8行目のテーブルのth要素は、class属性に”sort”を設定し、data-sort属性にテーブルのセルに紐づくclass名を設定します。

11行目のtbody要素のclass属性には”list”を設定します。

以降、テーブルセルのtd要素には、class属性でテーブルのth要素に紐づくclass名を設定します。

JavaScript

/**
 * List.js用のオプション設定
 */
var options = {
  // 並び替え項目
  valueNames: [ 'name', 'age', 'place', 'sex' ],
};

/**
 * List.jsのインスタンス生成
 */
var userList = new List('table', options);

4〜7行目で、valueNamesに、ソートをする項目のclass名を設定します。

12行目で、テーブルを括っているdiv要素のIDと、上記で設定したオプションを引数に渡してインスタンスを生成します。

CSS

/* 並び替え */
th.sort {
  cursor: pointer;
}

th.sort.desc:after {
  content: "▼";
  margin-left: 8px;
  font-size: 14px;
}

th.sort.asc:after {
  content: "▲";
  margin-left: 8px;
  font-size: 14px;
}

テーブルのCSSは省略しています。サンプルのcodepenで確認をしてください。

テーブルの見出しをクリックするとソートしますが、どこの項目でソートをしているか分からないので、CSSでソートをしている項目の横に”▲”か”▼”をつけるようにしています。

テーブルにページネーション機能をつける方法

HTML

<div id="table">
  <table>
    <thead>
      <tr>
        <th class="sort" data-sort="name">名前</th>
        <th class="sort" data-sort="age">年齢</th>
        <th class="sort" data-sort="place">出身</th>
        <th class="sort" data-sort="sex">性別</th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <td class="name">田中</td>
        <td class="age">24</td>
        <td class="place">福岡</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">鈴木</td>
        <td class="age">22</td>
        <td class="place">熊本</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">佐藤</td>
        <td class="age">30</td>
        <td class="place">鹿児島</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">高橋</td>
        <td class="age">27</td>
        <td class="place">宮崎</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">伊藤</td>
        <td class="age">33</td>
        <td class="place">大分</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">渡辺</td>
        <td class="age">24</td>
        <td class="place">佐賀</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">中村</td>
        <td class="age">29</td>
        <td class="place">長崎</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">山本</td>
        <td class="age">25</td>
        <td class="place">熊本</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">青木</td>
        <td class="age">30</td>
        <td class="place">宮崎</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">村上</td>
        <td class="age">24</td>
        <td class="place">熊本</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">山田</td>
        <td class="age">31</td>
        <td class="place">鹿児島</td>
        <td class="sex">男</td>
      </tr>
    </tbody>
  </table>
  <div class="pager">
    <ul class="pagination"></ul>
  </div>
</div>

「テーブルにソート機能をつける方法」のHTMLに、80〜82行目を追加しただけです。

80行目にページャーを配置するためのdiv要素を追加します。

81行目にui要素を配置します。（class属性に”pagination”を設定します）

JavaScript

/**
 * List.js用のオプション設定
 */
var options = {
  // 並び替え項目
  valueNames: [ 'name', 'age', 'place', 'sex' ],
  // １ページに表示するデータ数
  page: 3,
  // ページネーション
  pagination: {
    paginationClass:'pagination',
    innerWindow:1,
    outerWindow:１,
  },
};

/**
 * List.jsのインスタンス生成
 */
var userList = new List('table', options);

「テーブルにソート機能をつける方法」のJavaScriptに、7〜14行を追加しただけです。

8行目の、「page」という項目で１ページに表示するデータ数を設定します。

10〜14行目はページネーション用のプロパティ設定です。

11行目の、「paginationClass」には、HTMLに追加したui要素のクラス名（pagination）を設定します。

12行目の、「innerWindow」には表示しているページの前後何ページ分のページャを表示するか設定します。

13行目の、「outerWindow」には最初と最後、何ページ分のページャを表示するか設定します。

CSS

/* ページネーション */
.pager ul {
    list-style: none;
    position: relative;
    left: 50%;
    float: left;
}

.pager ul li {
    margin: 0 5px;
    position: relative;
    left: -50%;
    float: left;
}

.pager ul li span,
.pager ul li a {
    display: block;
    padding: 8px 15px;
    border-radius: 5px;
}

.pager ul li a {
    background-color: #EEE;
    color: #000;
    text-decoration: none;
}

.pager ul li a:hover,
.pager ul li.active a:hover {
    background-color: #333;
    color: #FFF;
}

.pager ul li.active a {
    font-weight: bold;
    background-color: #ccc;
}

上記はあくまでサンプルのCSSです。ご自身の環境に合うレイアウトにしてください。

テーブルに検索機能をつける方法

HTML

<div id="table">
  <input type="search" class="search" placeholder="検索" />
  <input type="checkbox" id="men" checked>男
  <input type="checkbox" id="women" checked>女
  <table>
    <thead>
      <tr>
        <th class="sort" data-sort="name">名前</th>
        <th class="sort" data-sort="age">年齢</th>
        <th class="sort" data-sort="place">出身</th>
        <th class="sort" data-sort="sex">性別</th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <td class="name">田中</td>
        <td class="age">24</td>
        <td class="place">福岡</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">鈴木</td>
        <td class="age">22</td>
        <td class="place">熊本</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">佐藤</td>
        <td class="age">30</td>
        <td class="place">鹿児島</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">高橋</td>
        <td class="age">27</td>
        <td class="place">宮崎</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">伊藤</td>
        <td class="age">33</td>
        <td class="place">大分</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">渡辺</td>
        <td class="age">24</td>
        <td class="place">佐賀</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">中村</td>
        <td class="age">29</td>
        <td class="place">長崎</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">山本</td>
        <td class="age">25</td>
        <td class="place">熊本</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">青木</td>
        <td class="age">30</td>
        <td class="place">宮崎</td>
        <td class="sex">女</td>
      </tr>
      <tr>
        <td class="name">村上</td>
        <td class="age">24</td>
        <td class="place">熊本</td>
        <td class="sex">男</td>
      </tr>
      <tr>
        <td class="name">山田</td>
        <td class="age">31</td>
        <td class="place">鹿児島</td>
        <td class="sex">男</td>
      </tr>
    </tbody>
  </table>
  <div class="pager">
    <ul class="pagination"></ul>
  </div>
</div>

「テーブルに検索機能をつける方法」のHTMLへ、2〜４行目で検索用のテキストボックスと、性別のチェックボックスを追加しています。

2行目のsearch型のテキストボックスは、class属性に”search”を設定することで、入力したキーワードで検索を行います。。

3〜4行目はチェックボックスで絞り込みをするために設定をしています。絞り込みは、Javascriptで実装が必要となります。

JavaScript

/**
 * List.js用のオプション設定
 */
var options = {
  // 並び替え項目
  valueNames: [ 'name', 'age', 'place', 'sex' ],
  // １ページに表示するデータ数
  page: 3,
  // ページネーション
  pagination: {
    paginationClass:'pagination',
    innerWindow:1,
    outerWindow:1,
  },
};

/**
 * List.jsのインスタンス生成
 */
var userList = new List('table', options);

/**
 * フィルター処理
 */
function filter() {
  // List.jsのフィルタリング
  userList.filter(
    function(item) {
      
      // 男のチェックボックスにチェックがついていて、データが男の場合
      if (sex_men.checked && item.values()['sex'] == '男') {
        // 表示する
        return true;
      }
      // 女のチェックボックスにチェックがついていて、データが女の場合
      else if (sex_women.checked && item.values()['sex'] == '女')　{
        // 表示する
        return true;
      }
      // 上記以外の場合
      else {
        // 表示しない
        return false;
      }
    }
  );
}

/**
 * 男のチェックボックス
 */
var sex_men = document.getElementById("men");
sex_men.addEventListener('change', filter);

/**
 * 女のチェックボックス
 */
var sex_women = document.getElementById("women");
sex_women.addEventListener('change', filter);

// フィルター処理
filter();

「テーブルに検索機能をつける方法」のJavaScriptへ、22〜62行目のスクリプトを追加しています。

22行目のフィルター処理では、filter関数で、チェックボックスでチェックが付いていてかつ、キーワードが同じである場合は表示（ture）するという処理を行なっています。

52〜53行目と、58〜59行目はチェックボックスに変更があった時のイベントハンドラーの設定を行なっています。

あくまでサンプルコードです。使用する場合はご自身の利用に合うかご確認の上使用をしてください。

最後に

自分で実装するとかなり面倒な機能が、List.jsを使用することでかなり簡単に実装することができます。

ぜひ活用してみてください。

スポンサーリンク
タイトルとURLをコピーしました