HTMLの表tableやリストデータを並べ替える方法(ソートボタン実装)

HTMLの表tableやリストデータを並べ替える方法(ソートボタン実装)

HTMLの表tableやリストデータを並べ替える方法(ソートボタン実装)

tableのデータやリストデータを昇順・降順に並べ替えるJS・HTML・CSSファイルによるソート機能をご紹介しています。

実装はとても簡単ですし、複数のテーブルやリストのデータを各項目ごとに並べ替える事ができます。

ただし漢字は意図する様には並ばないので、初期設定で自然な並びにしておく必要があります。

tableやリストデータを昇順・降順に並べ替える

WEBページでよく掲載する表データやリストデータ項目を、昇順あるいは降順に並べ替える機能(別名ソート機能)を紹介します。

実装自体は非常に簡単ですので、そのままコピペして使えます。

ポイントは漢字などではなく、数値やデータなどの列に並べ替え機能をつける事ですね。

JSファイル

使うJSファイルは「w3.js」です。

直接読込する際のコードは以下ですので、ヘッダーに下記コードを追記しましょう。

<script src="https://www.w3schools.com/lib/w3.js"></script>

JSファイルのダウンロード

ダウンロードすれば、以下の様なコードでヘッダーに設置できますね。

<script src="js/w3.js"></script>

上記はjsフォルダの中にw3.jsとして保存した場合です、本記事では保存せずに直接読込しています。

ダウンロードはこちらから

HTMLソース

テーブルデータHTML

<table class="sorttbl" id="myTable"> <tr> <th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(1)')">国名 <i class="fa fa-sort"></i></th> <th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(2)')">順位 <i class="fa fa-sort"></i></th> <th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(3)')">ランク <i class="fa fa-sort"></i></th> </tr> <tr class="item"> <td>ジャパン</td> <td>1位</td> <td>B</td> </tr> <tr class="item"> <td>アメリカ</td> <td>6位</td> <td>D</td> </tr> <tr class="item"> <td>イギリス</td> <td>3位</td> <td>A</td> </tr> </table>

各見出し部分をクリックする事で昇順・降順に並べ替えをする事ができます。

idやclassは上の通りに

tableのid名、およびtrタグについているitemクラス名は、jsファイル側で制御しています。

CSSで特にデザイン的なコントロールはしていませんが、必ず付けておいて下さい。

リストデータHTML

<button class="sort-btn" onclick="w3.sortHTML('#id01', 'li')">並べ替え</button> <ul id="id01" class="sortlist"> <li>東京</li> <li>大阪</li> <li>名古屋</li> <li>広島</li> <li>福岡</li> <li>北海道</li> </ul>

ボタンをクリックする事で昇順・降順に並べ替えする事ができます。

ulについているid名もHTMLの時と同様にjsファイル側で制御していますので、必ず必要です。

CSSファイル

/*--- table css ---*/ .sorttbl{ border-collapse: collapse; border-spacing: 0; width: 100%; display: table; } .sorttbl tr { display: table-row; vertical-align: inherit; border-color: inherit; border-bottom: 1px solid #ddd; cursor: pointer; } .sorttbl th:first-child, .sorttbl td:first-child{ padding-left: 16px; } .sorttbl td, .sorttbl th{ padding: 8px 8px; display: table-cell; text-align: left; vertical-align: top; } .sorttbl th{ color: #fff!important; background-color: #616161!important; } /*--- list css ---*/ .sort-btn{ border: none; display: inline-block; padding: 8px 16px; vertical-align: middle; overflow: hidden; text-decoration: none; color: #FFFFFF; background-color: #4CAF50; text-align: center; cursor: pointer; white-space: nowrap; } ul.sortlist{ list-style-type: none; } ul.sortlist li{ padding: 7px; border-bottom: dotted 1px #454545; }

実際にはこの通りである必要はありませんので、自由に変更して下さい。

並べ替え機能実装例

表テーブルソート事例

国名  順位  ランク 
ジャパン 1位 B
アメリカ 6位 D
イギリス 3位 A
※見出し横の上下の三角矢印は、iタグアイコンで実現しています。

リストデータソート事例

番号なしパターン

  • 東京
  • 大阪
  • 名古屋
  • 広島
  • 福岡
  • 北海道

番号なしパターンは並べ替えボタンを押すと、上の様に特殊な並び方をします。

どのような順番で並んでいるのか、詳しくはこちらをご覧ください。

番号ありパターン

  • 2.東京
  • 4.大阪
  • 3.名古屋
  • 5.広島
  • 6.福岡
  • 1.北海道

番号ありパターンは数字の昇順・降順で並んでくれます。

実装時のポイント

並べ替え対象データの列位置とonclickの数値をあわせる

上記の表テーブルソート例は、3列ある見出しthの欄に全てonclickイベントが設置してあります。

実際には国名でソートする用途は無いでしょうから、並べ替えしたい列のデータ部分のみに設置して問題はありません。

上記の例だと「順位」や「ランク」の列部分だけですね。

その場合、onclickイベントの'td:nth-child(1)'の数値部分をきちんとソート対象の「データがある列順」に合わせましょう。

具体的な代入例

2列目にある「順位」を軸に並べ替える場合、'td:nth-child(2)'と入れます。
3列目にある「ランク」を軸に並べ替える場合、'td:nth-child(3)'と入れます。

両方入れてももちろん大丈夫です。

このように、onclickの数値と並べ替え対象の列の順番を合わせておくようにしましょう。

並べ替えするテーブルやリストを複数設置する場合

テーブルの方はidのmyTableを「myTable2」など別名にし、onclick構文のところも同じ名前に揃えれば複数テーブルでも並べ替えが可能です。

リストの方もidを別名にしbuttonのonclick構文部分も同名揃えれば、複数のリストで並べ替えを実現できます。

漢字の並べ替えの基準について

漢字の並べ替えは単純に読みがなの順番に並ぶ訳ではありません。

上のリストデータの番号なし事例の通り、並び替え後の都道府県はひらがな読みの順ではないですよね。

漢字には「JIS 漢字コード」と呼ばれる特殊な漢字の並び順が存在し、この順番に基づいて昇順・降順が決まります。

JIS 漢字コードはこちら

JIS 漢字コード配列

JIS 漢字コードによる漢字の配列はおおよそ以下のルールに基づいています。

・JIS第1水準漢字…常用漢字や地名など、比較的使用頻度が多い基本的な漢字
・JIS第2水準漢字…それ以外の漢字

JIS第1水準漢字の並び

原則として「使用頻度の多い音読みの順」で配列しているようです。

音読みがほとんどされない漢字については「訓読みの順」が採用されています。

代表的な音訓が一致する場合には「部首順」であり、さらに部首まで共通の場合には「画数順」になります。

JIS第2水準漢字の並び

基本的には部首順、画数順、読み順の順番で配列しています。

実際にコード表を見るとわかる通り、第1水準漢字は最初に「読みの同じ漢字」が一カ所に固まっています。

それに対し第2水準漢字は、最初に「部首が同じ漢字」が一カ所に固まっています。

要は、漢字は自分の都合の良い並びにはならないという事ですね。

まとめ

以上リストデータとテーブル表データの並べ替え実装方法をご紹介しました。

大変簡単に実装できますのでぜひお試しください。

ただし漢字を直接並べ替えする場合は注意が必要です。

漢字データは最初からセオリー通りに並べておく

実際のところ、漢字部分を直接並び替える用途ってなかなかないと思います

なので例えば国名など、ユーザーが一般的に並び順を直感できる名称はあらかじめ順番通りに並べておきましょう。

その上で対応するフィールドにデータやランキング値などを入れておき、そこに並べ替える機能を実装した方がスッキリします。

この記事をシェアする

一押し人気コーナー紹介

HTMLカテゴリの関連記事