list.jsでHTMLテーブルをソート可能にし、かつ検索も可能にする方法を紹介する。
とりあえず、実際にこんな感じのが作れるというのを見てもらいたい。
PCエロゲ作品(ADV)一覧 有名順 検索数順 2018/12更新
list.jsはHTML要素を検索可能にしたりソート可能にしたりする機能を追加するJqueryプラグインだ。
サンプルなど : 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_volumevariable、countryに置換する。
atomにてctrl-Dにて置換していけば楽かと思う。
雑な説明になってしまったが、後述の部分はあくまで完成形のコードを効率的に作るための我流のtipsだと思ってほしい。
今更思ったけどslimとか使えるなら使っても楽だと思う。僕はあんまり詳しくないのでこういう方法をとった次第。
←← こちらから💻
