Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

概要

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

yourai
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away