コピペでできるテーブルにソート機能を実装するjQueryライブラリtablesorter

XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。

テーブルレイアウトは、tableタグを使って格子状にレイアウトしていく手法で、自分もWEBデザインを始めたての2000年頃はこのレイアウトで組む事が一般的でした。

今でも表組みやメルマガのレイアウトなどでは、この tableタグを使うことがありますが、CSSとtablesorterというjQueryのプラグインを併用することで、いろんなことができたりします。

今回は、コピペでできるテーブルにソート機能を実装するjQueryライブラリtablesorterについてご紹介します。

テーブルとは？
テーブルのデザインサンプル
コード一式
指定した列だけソート機能を無効化するコード

テーブルとは？

テーブルレイアウトは、table tr td などのタグを使用したレイアウトで、初心者でも段組しやすく、表示崩れが少ない為WEB黎明期にはよく使われていた手法ですが、cssの普及と発達により廃れていった手法です。

このテーブルレイアウトは、覚えることが少なく、photoshopから画像を切り出す「スライス機能」と相性が良い為、当時LPなんかでもphotoshopのPSDファイルから切り出しをよくしていた記憶があります。

ユーザー	名前	名前(かな)	年齢	地域
abc123	田中	たなか	25歳	東京都
abababa	鈴木	すずき	30歳	青森県
def567	佐藤	さとう	36歳	北海道
ghi890	井上	いのうえ	41歳	沖縄県

上記のように、タグだけの記述の場合簡素なものになってしまいますが、CSSと併用することでイケてる感じにすることができます。

テーブルのデザインサンプル

tablesorterというjQueryのプラグインを使用して、クリックするだけでその列を昇順/降順でソートするテーブルです。

ソート部分には擬似要素の :after でfontawesomeを表示させ、メディアクエリでwidth:640px 以下の場合、表組みのレイアウトは変えずに横にスクロールして表を見れるようにしています。

ユーザ	名前	名前(かな)	年齢	住所
abc123	田中	たなか	25歳	東京都
abababa	鈴木	すずき	30歳	青森県
def567	佐藤	さとう	36歳	北海道
ghi890	井上	いのうえ	41歳	沖縄県

コード一式

このデザインは、jQueryを利用しています。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO

当サイトでは以下のjQueryを使用しています。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>

上記のような記述が、htmlファイルの

<head></head>

の中に無い場合その中へ貼り付けましょう。

tablesorterというjQueryのプラグインは、<head>〜</head> の中に記述しましょう。

コードを表示する

jQueryライブラリ

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js"></script>

HTML

<div class="scroll">
<table id="sorter">
  <thead>
    <tr>
      <th>ユーザ</th>
      <th>名前</th>
      <th>名前(かな)</th>
      <th>年齢</th>
      <th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="icon bird">abc123</td>
      <td>田中</td>
      <td>たなか</td>
      <td>25歳</td>
      <td>東京都</td>
    </tr>
    <tr>
      <td class="icon crab">abababa</td>
      <td>鈴木</td>
      <td>すずき</td>
      <td>30歳</td>
      <td>青森県</td>
    </tr>
    <tr>
      <td class="icon whale">def567</td>
      <td>佐藤</td>
      <td>さとう</td>
      <td>36歳</td>
      <td>北海道</td>
    </tr>
    <tr>
      <td class="icon whale">ghi890</td>
      <td>井上</td>
      <td>いのうえ</td>
      <td>41歳</td>
      <td>沖縄県</td>
    </tr>
  </tbody>
</table>
</div>

CSS

table{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

table tr{
  border-bottom: solid 1px #eee;
  cursor: pointer;
}

table tr:hover{
  background-color: #c8e4ff;
}

table th,table td{
  text-align: center;
  width: 20%;
  padding: 15px 0;
}

table td.icon {
    background-size: 45px;
    background-position: left 5px center;
    background-repeat: no-repeat;
    padding-left: 0px;
}

table td.icon.bird{
  background-image: url(https://dubdesign.net/wp-content/uploads/2021/01/efoform_eyecatch-520x300.jpg);
}

table td.icon.whale{
  background-image: url(https://dubdesign.net/wp-content/uploads/2020/12/afc_eyecatch-520x300.jpg)
}

table td.icon.crab{
  background-image: url(https://dubdesign.net/wp-content/uploads/2020/12/afcimage_eyecatch-520x300.jpg)
}

.tablesorter-header-inner {
    display: inline-block;
}

.tablesorter-headerUnSorted:after 
{
  position: relative;
  margin-left: 10px;
  content: '\f0dc';
  color: #6bb6ff;
  font-size: 1.2rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  line-height: 1.4;
}

.tablesorter-headerAsc:after 
{
  position: relative;
  margin-left: 10px;
  content: '\f163';
  color: #6bb6ff;
  font-size: 1.2rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  line-height: 1.4;
}

.tablesorter-headerDesc:after 
{
  position: relative;
  margin-left: 10px;
  content: '\f886';
  color: #6bb6ff;
  font-size: 1.2rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  line-height: 1.4;
}

@media screen and (max-width: 640px) {
  .scroll {
    overflow-x: auto;
  }
  #sorter {
    min-width: 640px;
    margin: 0 10px 50px;
  }
}

jQuery

$(function() {
  $('#sorter').tablesorter();
});

指定した列だけソート機能を無効化するコード

指定した列だけソート機能を無効にする場合は、jQueryに headersプロパティを使用することで無効にできます。

jQuery

$(function() {
  $('#sorter').tablesorter({
     headers: {
       0: {sorter:false}
     }
  });
});

添字の0は左から0番目の列ということで、その添字に対して{sorter:false}と指定することで一番左の列がソートできなくなります。

そして、指定した列の位置に連動したCSSも記述すしてソートのアイコンも非表示にしておきましょう。

以下のコード一式は、一番左の列のみソート機能を解除したコードです。

コードを表示する

jQueryライブラリ

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js"></script>

HTML

<div class="scroll">
<table id="sorter">
  <thead>
    <tr>
      <th>ユーザ</th>
      <th>名前</th>
      <th>名前(かな)</th>
      <th>年齢</th>
      <th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="icon bird">abc123</td>
      <td>田中</td>
      <td>たなか</td>
      <td>25歳</td>
      <td>東京都</td>
    </tr>
    <tr>
      <td class="icon crab">abababa</td>
      <td>鈴木</td>
      <td>すずき</td>
      <td>30歳</td>
      <td>青森県</td>
    </tr>
    <tr>
      <td class="icon whale">def567</td>
      <td>佐藤</td>
      <td>さとう</td>
      <td>36歳</td>
      <td>北海道</td>
    </tr>
    <tr>
      <td class="icon whale">ghi890</td>
      <td>井上</td>
      <td>いのうえ</td>
      <td>41歳</td>
      <td>沖縄県</td>
    </tr>
  </tbody>
</table>
</div>

CSS

table{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

table tr{
  border-bottom: solid 1px #eee;
  cursor: pointer;
}

table tr:hover{
  background-color: #c8e4ff;
}

table th,table td{
  text-align: center;
  width: 20%;
  padding: 15px 0;
}

table td.icon {
    background-size: 45px;
    background-position: left 5px center;
    background-repeat: no-repeat;
    padding-left: 0px;
}

table td.icon.bird{
  background-image: url(https://dubdesign.net/wp-content/uploads/2021/01/efoform_eyecatch-520x300.jpg);
}

table td.icon.whale{
  background-image: url(https://dubdesign.net/wp-content/uploads/2020/12/afc_eyecatch-520x300.jpg)
}

table td.icon.crab{
  background-image: url(https://dubdesign.net/wp-content/uploads/2020/12/afcimage_eyecatch-520x300.jpg)
}

.tablesorter-header-inner {
    display: inline-block;
}

.tablesorter-headerUnSorted:after 
{
  position: relative;
  margin-left: 10px;
  content: '\f0dc';
  color: #6bb6ff;
  font-size: 1.2rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  line-height: 1.4;
}

.tablesorter-headerAsc:after 
{
  position: relative;
  margin-left: 10px;
  content: '\f163';
  color: #6bb6ff;
  font-size: 1.2rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  line-height: 1.4;
}

.tablesorter-headerDesc:after 
{
  position: relative;
  margin-left: 10px;
  content: '\f886';
  color: #6bb6ff;
  font-size: 1.2rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  line-height: 1.4;
}

@media screen and (max-width: 640px) {
  .scroll {
    overflow-x: auto;
  }
  #sorter {
    min-width: 640px;
    margin: 0 10px 50px;
  }
}

.tablesorter-headerUnSorted:first-child:after {
  content:none;
}

jQuery

$(function() {
  $('#sorter').tablesorter({
     headers: {
       0: {sorter:false}
     }
  });
});

コピペでできるテーブルにソート機能を実装するjQueryライブラリtablesorter

テーブルとは？

テーブルのデザインサンプル

コード一式

指定した列だけソート機能を無効化するコード

関連記事

まとめ記事

【脱jQuery】簡単コピペでページをリッチにするネイティブなJavaScriptネタ帳まとめ

【コピペで簡単】プラグインなしでできるWordPressのカスタマイズまとめ

【まとめ】レンタルサーバーの記事一覧

【まとめ】レンタルサーバー10社のレスポンスの速さとパフォーマンス測定結果

【コピペで簡単】LPやサイトの味付けによく使うjQueryライブラリまとめ

Google ポリシーオフィスアワー 2023.1.26

Article

About

Summary

OTHER