list.jsでHTMLテーブルにソート(昇順/降順並び替え)と検索を実装

    >

list.jsでHTMLテーブルをソート可能にし、かつ検索も可能にする方法を紹介する。

とりあえず、実際にこんな感じのが作れるというのを見てもらいたい。

PCエロゲ作品(ADV)一覧 有名順 検索数順 2018/12更新

list.jsはHTML要素を検索可能にしたりソート可能にしたりする機能を追加するJqueryプラグインだ。

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.

サンプルなど : Jonny Strömberg on CodePen

今回は少し複雑なテーブルのやり方を紹介していく。

とりあえず、ひな形はこちら。

List.js – Table with sort, add, edit, remove

今回はカラムの削除、追加、編集といった機能はいらないと思ったのでつけないことにしたが、こちらのソースコードを見れば付け足すことも可能かと思う。

そして完成形のひな形がこちら。bootstrapもつけてある。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="contacts" class="container"> <input type="text" class="search" placeholder="Search" /> <table class='table table-hover table-striped'> <thead> <tr> <th class="sort" data-sort="Keyword">エロゲ名称</th> <th class="sort" data-sort="Min_search_volume">月間検索数(min)</th> <th class="sort" data-sort="Max_search_volume">月間検索数(max)</th> <th colspan="2"> </th> </tr> </thead> <tbody class="list"> <tr> <td class='Keyword'>1 2 summer</td> <td class="Min_search_volume">100</td> <td class="Max_search_volume">1000</td> </tr> <tr> <td class='Keyword'>1 番 じゃ なきゃ ダメ です かっ</td> <td class="Min_search_volume">100</td> <td class="Max_search_volume">1000</td> </tr> <tr> <td class='Keyword'>11eyes</td> <td class="Min_search_volume">1000</td> <td class="Max_search_volume">10000</td> </tr> <tr> <td class='Keyword'>3d カスタム 少女</td> <td class="Min_search_volume">1000</td> <td class="Max_search_volume">10000</td> </tr> <!-- ...省略... --> <tr> <td class='Keyword'>77 and two stars meet again</td> <td class="Min_search_volume">10</td> <td class="Max_search_volume">100</td> </tr> <tr> <td class='Keyword'>9 nine ここ の つ ここ のか ここ の いろ</td> <td class="Min_search_volume">1000</td> <td class="Max_search_volume">10000</td> </tr> <tr> <td class='Keyword'>_summer</td> <td class="Min_search_volume">100</td> <td class="Max_search_volume">1000</td> </tr> <tr> <td class='Keyword'>after and another</td> <td class="Min_search_volume">10</td> <td class="Max_search_volume">100</td> </tr> <tr> <td class='Keyword'>air</td> <td class="Min_search_volume">10000</td> <td class="Max_search_volume">100000</td> </tr> </tbody> </table> </div> <style> body { font-family:sans-serif; } table td, table th { padding:5px; } </style> <script type="text/javascript"> var options = { valueNames: [ 'id', 'Keyword', 'Min_search_volume', 'Max_search_volume' ] }; // Init list var contactList = new List('contacts', options); var idField = $('#id-field'), KeywordField = $('#Keyword-field'), Min_search_volumeField = $('#Min_search_volume-field'), Max_search_volumeField = $('#Max_search_volume-field'), addBtn = $('#add-btn'), editBtn = $('#edit-btn').hide(), removeBtns = $('.remove-item-btn'), editBtns = $('.edit-item-btn'); // Sets callbacks to the buttons in the list refreshCallbacks(); addBtn.click(function() { contactList.add({ id: Math.floor(Math.random()*110000), Keyword: KeywordField.val(), Min_search_volume: Min_search_volumeField.val(), Max_search_volume: Max_search_volumeField.val() }); clearFields(); refreshCallbacks(); }); editBtn.click(function() { var item = contactList.get('id', idField.val())[0]; item.values({ id:idField.val(), Keyword: KeywordField.val(), Min_search_volume: Min_search_volumeField.val(), Max_search_volume: Max_search_volumeField.val() }); clearFields(); editBtn.hide(); addBtn.show(); }); function refreshCallbacks() { // Needed to add new buttons to jQuery-extended object removeBtns = $(removeBtns.selector); editBtns = $(editBtns.selector); removeBtns.click(function() { var itemId = $(this).closest('tr').find('.id').text(); contactList.remove('id', itemId); }); editBtns.click(function() { var itemId = $(this).closest('tr').find('.id').text(); var itemValues = contactList.get('id', itemId)[0].values(); idField.val(itemValues.id); KeywordField.val(itemValues.Keyword); Min_search_volumeField.val(itemValues.Min_search_volume); Max_search_volumeField.val(itemValues.Max_search_volume); editBtn.show(); addBtn.hide(); }); } function clearFields() { KeywordField.val(''); Min_search_volumeField.val(''); Max_search_volumeField.val(''); } </script>

複雑そうに見えるが、実際の変数はKeyword
Min_search_volume
Max_search_volume
の3つだけだ。この3つはカラムの数に合わせて変動する。

注意するのは、theadと、それぞれのtdのクラスである。それ以外はコピペからの置換でいける。

上記のソースコードに沿うように変数を書き換え、削除または追加してくれればいい。

具体例とともに、上記に沿ったソースコードの作り方を示しておく。

variable,country
hoge,ja
foo,us
bar,us

まず上記のようなCSVを用意する。

CSV To HTML Converterから、HTMLへ変換することができる。

ここが肝だが、 Step 4: Create Custom Output via Template にて、

<tr>
  <td class='variable'>{f1}</td>
  <td class="country">{f2}</td>
</tr>

といったように、クラスを付けておく。

あとは、上記のソースコードと生成されたHTMLテーブルを取り替える。

最後に、Keyword
Min_search_volume
Max_search_volume
の文字列をそれぞれ、variablecountryに置換する。

atomにてctrl-Dにて置換していけば楽かと思う。

雑な説明になってしまったが、後述の部分はあくまで完成形のコードを効率的に作るための我流のtipsだと思ってほしい。
今更思ったけどslimとか使えるなら使っても楽だと思う。僕はあんまり詳しくないのでこういう方法をとった次第。


お困りですか?この記事で紹介していることをマンツーマンで指導、解説、代行します。まずはお気軽にお問い合わせください。


関連するかもしれない記事

jQuery x list.jsで正規表現検索できて並び替えもできるHTMLテーブルを作る
WordPress hooks 最終的なHTMLを取得して編集する
Webページのリダイレクト速度比較 HTML vs JavaScript vs .htaccess
JavaScript YoutubeでHTML5動画が再生されているか判定
selenium webdriverでページをPDFとして保存するかリソースを含んだHTMLを保存したかったけどできないみたい
JavaScriptをHTMLが読み込まれたら実行する/ウェブページが完全に読み込まれたら実行する
JavaScriptをHTMLが読み込まれたら実行する/ウェブページが完全に読み込まれたら実行する


Close Menu