人生を加速させたい。

人生に変化を求めている20代前半の社畜です。ニッチな記事を書いていければいいと思います。

【スポンサーリンク】

はてなブログでソート機能(並び替え)を持った表を作りたい!!

はてなブログで表の項目をソートしたい方に向けた記事になります。

今回紹介するのはjQueryというJavaScriptのライブラリー(便利な機能集的なやつ)にある機能を使った方法を説明します!

できあがりはこんな感じ

今回作りたい表は下のような感じになります。

ヘッダーの部分をクリックすると、昇順、降順で並び変える事ができます!

No 名前 個数 価格 画像
1 アップル 100 200 f:id:itsuwalove777:20190530192501p:plain
2 オレンジ 30 100 f:id:itsuwalove777:20190530192743p:plain
3 パイナップル 5 800 f:id:itsuwalove777:20190530192756p:plain
4 グレープ 20 1000 f:id:itsuwalove777:20190530192822p:plain
5 ドラゴンフルーツ 5 1200 f:id:itsuwalove777:20190530192836p:plain

カンマを入れると、また別の設定が必要になるため、今回はオーソドックスなカンマなしの数値列と文字列に対するソートができる表の作り方を紹介していきたいと思います。

本当は他のライブラリーを使いたかったのですが、上手く動作しなかったので…また次回!

jQueryコードを追加する!!

フォーマットがグチャグチャですが、必要なコードを貼っていきます!

記事の一番上の方に

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js" type="text/javascript"></script>

を追加してください!

これは、簡単に言うと使用するライブラリーの読み込みです。

そして、記事の最後尾に

<script type="text/javascript">// <![CDATA[
(function($) {

$(function() {
$("#sort1").dataTable();
$('#sort2').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": true,
"bAutoWidth": false
});
$('#MyTable').dataTable({
"oLanguage": {
"sProcessing": "お待ち下さい",
"sLengthMenu": "_MENU_ 件表示",
"sZeroRecords": "データ無し",
"sInfo": "_START_ ~ _END_件(全_TOTAL_ 件)",
"sInfoEmpty": " 0 件中 0 から 0 まで表示",
"sInfoFiltered": "(全 _MAX_ 件より抽出)",
"sInfoPostFix": "",
"sSearch": "検索:",
"sUrl": "",
"oPaginate": {
"sFirst": "先頭 ",
"sPrevious": "前ページ ",
"sNext": " 次ページ",
"sLast": " 最後 "
}
},
bProcessing: true,
iDisplayLength: 200,
sPaginationType: "full_numbers",
bSortClasses: true,
bFilter: true,
bLengthChange: true

});
});
})(jQuery);

を追加してください!

このコードが先ほど読み込んだライブラリーを使った、仕掛けを作っている部分です。 

真ん中部分の赤字で書いてある所は各自のテーブル名に合わせてください!

テーブルを追加する!

前準備は終わったので、主役になるテーブルの追加を行っていきます。

上の表は

<table id="MyTable">
<thead>
<tr>
<th>No</th>
<th>名前</th>
<th>個数</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>アップル</td>
<td align="right">100</td>
<td align="right">200</td>
</tr>
<tr>
<th>2</th>
<td>オレンジ</td>
<td align="right">30</td>
<td align="right">100</td>
</tr>
<tr>
<th>3</th>
<td>パイナップル</td>
<td align="right">5</td>
<td align="right">800</td>
</tr>
<tr>
<th>4</th>
<td>グレープ</td>
<td align="right">20</td>
<td align="right">1000</td>
</tr>
<tr>
<th>5</th>
<td>ドラゴンフルーツ</td>
<td align="right">5</td>
<td align="right">1200</td>
</tr>
</tbody>
</table>

という感じで作られています。

項目数や件数が少ない場合は、コピペして追記していくと確実に動作すると思います。

これだけで簡単にソート機能と検索機能を追加することができます。

上手くいかない場合

動作しない場合は… はてなブログの他の設定と噛み合ってないのかもしれません…

最初に見直すのは、テーブルのidです。

HTMLとjQueryで一致しているか確認します。

<table id="〇〇〇">

先ほどのjQueryによる処理の赤字で書いた部分の文字列が同じかどうか確認しましょう。

一致していない場合、どちらかを修正して一致させましょう。

また、テーブルのヘッダー部分が<thead>~</thead>で囲まれているかを確認しましょう! 

 

ソートが上手くいかない場合は、数字の列にカンマや記号が含まれていないか確認してください!

記号や文字列が入っていると正しくソートされないパターンがあります!

他の方法で実装できれば、また紹介したいと思います!

 

ここまで

最後までお読みいただきありがとうございます。

【スポンサーリンク】