List.js でソート可能な表をお手軽に作る

2018/11/05
(この記事の文字数: 253)

ソート可能な表って簡単に作れないものかと思い探してみたら List.js で簡単にできたのでメモしておきます。List.js の Table サンプルを参考にソート可能な表を作成したらとても簡単に作れました。

以下がサンプルのHTMLを少し改造したものです。表のヘッダーをクリックするとそのカラムのセル値に従って昇順、降順にソートされます。また、Search 表の要素を絞り込みできます。

Name	Born
Jonny Stromberg	1986
Jonas Arnklint	1985
Martina Elm	1986
Gustaf Lindqvist	1983

以下がHTMLソースです。CDN 版を使うとたったこれだけでソート可能な表と絞り込みフィルター機能が用意できました。とてもお手軽です。


<div id="users">
    <input class="search" placeholder="Search" />
    <table>
        <thead>
            <tr>
                <th class="sort" data-sort="name">Name</th>
                <th class="sort" data-sort="born">Born</th>
            </tr>
        </thead>
        <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="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script>
    var options = {
        valueNames: ['name', 'born']
    };
    var userList = new List('users', options);
</script>