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の３つだけだ。この３つはカラムの数に合わせて変動する。

注意するのは、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の文字列をそれぞれ、variable、countryに置換する。

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

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

yuipro

プログラミング；コーディング；テクノロジー；ディープラーニング etc

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