List.js でソート可能な表をお手軽に作る
ロゴ
「Web 開発」に関連する記事一覧

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

2018/11/05
JavaScript HTML 

ソート可能な表って簡単に作れないものかと思い探してみたら 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>


    このエントリーをはてなブックマークに追加    

関連記事

にほんブログ村 ゲームブログ ファイアーエムブレムへ にほんブログ村 デザインブログ コンピュータグラフィックスへ

0.0363 sec
Copyright(C)2006-2018 wsp All Rights Reserved