list.jsを使ってみた（テーブルをセルの値でソートしてみた）

概要

list.js v1.5.0( http://listjs.com/ )を使用して、テーブルをセルの値でソートできるようにした。
その際にはまったことなどを記載する。

行ったこと

テーブルへの適用

下記のようなコードを記載することで、ボタンを押下することでclassがnameの列のセルの値でテーブルをソートすることができる。
buttonのdata-sortの属性を変更することで、異なる列でソートすることができる。

注意：サンプル( http://listjs.com/examples/table/ )通りに記述すれば期待通りの動作が得られるが、
最初tableにlistのclassを与えていて動かずハマった（テーブルのサンプルがあることに気づいていなかった）。
テーブルにlist.jsを適用するときは、tbodyにlistを付与しましょう。

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>
  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="name">Jonny Stromberg</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Jonas Arnklint</td>
        <td class="born">1985</td>
      </tr>
      <tr>
        <td class="name">Martina Elm</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Gustaf Lindqvist</td>
        <td class="born">1983</td>
      </tr>
    </tbody>
  </table>
</div>
<script src="list.js"></script>

<script>
var options = {
  valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);
</script>

異なる条件でソートするボタンを並べる

上記のコードでは名前でソートするボタンを用意しているが、
それとは別に西暦でソートしたいボタンを生成することもできる。
（条件に応じて何個もボタンを生成することができる）

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>
  <button class="sort" data-sort="born">
    Sort by born
  </button>
  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="name">Jonny Stromberg</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Jonas Arnklint</td>
        <td class="born">1985</td>
      </tr>
      <tr>
        <td class="name">Martina Elm</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Gustaf Lindqvist</td>
        <td class="born">1983</td>
      </tr>
    </tbody>
  </table>
</div>
<script src="list.js"></script>

<script>
var options = {
  valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);
</script>

ページネーション

ページネーションに関してもサンプル( http://listjs.com/examples/pagination/ )をテーブルに適用することで実現できる。

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>
  <button class="sort" data-sort="born">
    Sort by born
  </button>
  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="name">Jonny Stromberg</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Jonas Arnklint</td>
        <td class="born">1985</td>
      </tr>
      <tr>
        <td class="name">Martina Elm</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Gustaf Lindqvist</td>
        <td class="born">1983</td>
      </tr>
    </tbody>
  </table>
  <ul class="pagination"></ul>
</div>
<script src="list.js"></script>

<script>
var options = {
  valueNames: [ 'name', 'born' ],
  page: 3,
  pagination: true,
};
var userList = new List('users', options);
</script>

ページネーションでアクティブなページの強調表示

上記サンプルだと(cssは全然記述していないので分かりづらいが)、
ページネーションの文字が選択されているものとそうでないものが同じフォントで表示されてしまい、
今どこが選択されているかわかりづらい表示となる。
それを切り替えるためには下記のように記載する。
（選択されているものはliにactiveという属性が付与される。）

<style type="text/css">
.pagination li {
  display:inline-block;
  padding:5px;
}
.pagination li.active {
  font-weight: bold;
  font-size: 1.5rem;
}
</style>

今後やりたいこと

マルチカラムでのソートをやりたい。
（特定の行でソートした後に、その状態を保持したまま別の行でソートする。参考：https://datatables.net/examples/basic_init/multi_col_sort.html）