List.jsは無料で使えますか？

はい、MITライセンスなので無料で商用利用も可能です。

jQueryは必要ですか？

いいえ、List.jsは純粋なJavaScriptで動作します。

スマホ対応はできますか？

基本機能は対応しています。レイアウトはCSSで調整しましょう。

データが多くなると重くなりますか？

数千件以上のデータには不向きです。大量データにはDataTablesなどを検討しましょう。

ReactやVueと併用できますか？

原則Vanilla JS用ライブラリのため、React/Vueとの相性は良くありません。

【初心者向け】List.jsの使い方｜HTMLテーブルに検索・ソート・ページング機能を簡単追加！

表に検索や並び替え、ページ送り機能をつけたいけど、複雑なJavaScriptや重たいライブラリを使うのはちょっと……。
そんな方におすすめなのが「List.js」です。
List.jsは、HTMLのテーブルやリストにソート・検索・ページネーションなどの機能を軽量かつシンプルなコードで追加できるJavaScriptライブラリです。

本記事では、初心者でもすぐに使えるようにList.jsの基本的な使い方から具体的なコード例まで、わかりやすく解説します。

コピペで試せるサンプル付き
CDNで簡単導入
jQuery不要で軽量

HTML/CSSが少しわかればすぐに使える内容になっているので、ぜひ活用してみてください！

🔗 公式ドキュメント

List.jsの最新情報やAPIリファレンス、豊富なサンプルコードは、公式ドキュメントで確認できます。

公式サイト

List.js

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

GitHub

GitHub - javve/list.js: The 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.

The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built t...

APIドキュメント

List.js

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

List.jsとは？どんなことができるの？

List.jsは、テーブルやリスト要素に「検索」「ソート」「フィルター」「ページネーション」などの機能を簡単に追加できる軽量JavaScriptライブラリです。
依存ライブラリがなく、数行のJavaScriptコードとHTMLのクラス設定だけで実装できます。

他のライブラリとの違いは？

ライブラリ名	特徴	学習コスト
List.js	軽量・シンプル・依存なし	低
DataTables	高機能・jQuery依存	中〜高
AG Grid	超高機能・商用ライセンスあり	高

「とりあえず検索・並び替え・ページ送りを使いたい」という場合は、List.jsが最適です。

List.jsを使う準備をしよう

CDNで読み込む方法（おすすめ）

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

CDNを使えばファイルをダウンロードする必要がなく、すぐに使い始められます。

ダウンロードして使う場合

List.js公式サイトから「list.min.js」をダウンロードし、任意の場所に配置してHTMLに読み込みます。

<!-- JavaScript -->
<script src="js/list.min.js"></script>

HTMLテーブルにソート機能を追加する

HTML

以下はList.jsでソート機能を実装するHTMLの例です。 data-sortに設定した値と<td>タグのクラス名を一致させることがポイントです。

<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>
      <!-- 以下略 -->
    </tbody>
  </table>
</div>

JavaScript

以下のスクリプトで、List.jsのインスタンスを生成して、並び替えの対象となる項目（valueNames）を設定しています。

var options = {
  // 並び替え項目
  valueNames: ['name', 'age', 'place', 'sex'],
};

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

CSS

ソート中の列に矢印アイコン（▲▼）を表示するための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;
}

ページネーション機能を追加する

HTMLの変更箇所

以下のHTMLを追加することで、ページ送り（ページネーション）を表示できます。

<div class="pager">
  <ul class="pagination"></ul>
</div>

JavaScriptの変更

1ページに表示する件数（page）と、ページャーの見た目に関する設定を追加しています。

var options = {
  // 並び替え項目
  valueNames: ['name', 'age', 'place', 'sex'],
  // １ページに表示するデータ数
  page: 3,
  // ページネーション
  pagination: {
    paginationClass: 'pagination',  // ページネーションクラス名
    innerWindow: 1,  // ページの前後何ページ分のページャを表示するか
    outerWindow: 1,  // 最初と最後、何ページ分のページャを表示するか
  },
};

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

CSS例（必要に応じて調整）

ページネーションを中央に表示し、現在のページをハイライト表示するための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 a {
  background-color: #EEE;
  color: #000;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 5px;
}

検索＆フィルター機能を実装する

HTMLに検索ボックスとフィルターを追加

以下のように、検索入力と性別フィルタ用のチェックボックスを設置します。

<input type="search" class="search" placeholder="検索" />
<input type="checkbox" id="men" checked>男
<input type="checkbox" id="women" checked>女

JavaScriptの追加

チェックボックスの状態によって表示・非表示を切り替えるフィルター機能の実装です。

function filter() {
  // List.jsのフィルタリング
  userList.filter(function(item) {
    // 男のチェックボックスにチェックがついていて、データが男の場合
    if (sex_men.checked && item.values()['sex'] === '男') return true;

    // 女のチェックボックスにチェックがついていて、データが女の場合
    if (sex_women.checked && item.values()['sex'] === '女') return true;

    return false;
  });
}

// チェックボックスへイベント追加
var sex_men = document.getElementById("men");
var sex_women = document.getElementById("women");
sex_men.addEventListener('change', filter);
sex_women.addEventListener('change', filter);
filter();