テーブルを並べ替えソートする便利なライブラリ「tablesorter」のカスタマイズ

テーブルの一覧をクリックで並び替えソートしてくれる「tablesorter」。
簡単設置で、本当に便利な便利なライブラリの簡単なカスタマイズ方法。

この記事で紹介する事

この記事では「tablesorter」の設置方法と、僕が検索して見つからなかったプチカスタマイズ方法を紹介します。
内容としては、並べ替えした際に視覚的にわかりやすくする為、昇順・降順の上下の矢印を設置するとう内容です。

tablesorterカスタマイズのデモ

テーブルの見出し(th)をクリック・タップすると表の中身が並び替えされます。

tablesorter実装方法

tablesorterの実装自体はものすごく簡単です。

head内

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

jqueryを元々書いてる場合はjqueryの記述は不要です。
jqueryを記述箇所より下に「tablesorter」を読み込むようにしてください。
また、「tablesorter」のソースを直接ダウンロードしたい場合は以下のリンクから。

jQuery tablesorter 2.0

mottie.github.io

javascript(jquery)

$(function() {
  $(".sort").tablesorter();
});

html

<table class="sort">
  <thead>
  　　<tr>
    　　<th>タイトル</th>
      <th>公開年</th>
      <th>評価</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>フォレスト・ガンプ</td>
      <td>1994年</td>
      <td>100点</td>
    </tr>
    <tr>
    　　<td>グリーンマイル</td>
      <td>1999年</td>
      <td>80点</td>
    </tr>
    <tr>
      <td>ターミナル</td>
      <td>2004年</td>
      <td>70点</td>
    </tr>
  </tbody>
</table>

「thead」タグがないと動きませんので、忘れずに。

カスタマイズパターン別CSS

パターン1のCSS

table {
  border-collapse: collapse;
  border-spacing: 0;
}
table th,
table td{
  padding: 10px 20px;
  border: 1px solid #bbb;
}
table th{
  background: #eee;
  cursor: pointer;
}
table th::before{
  content: '↑';
  transition: .5s;
}
table th::after{
  content: '↓';
  transition: .5s;
}
table th div{
  margin: 0 5px;
  display: inline-block;
}
th.tablesorter-headerAsc::before,
th.tablesorter-headerDesc::after{
  color: #ffbe00;
}

パターン2のCSS

table {
  border-collapse: collapse;
  border-spacing: 0;
}
table th,
table td{
  padding: 10px 20px;
  border: 1px solid #bbb;
}
table th{
  background: #eee;
  cursor: pointer;
}
table th div{
  margin: 0 5px;
  display: inline-block;
}
table th::after{
  content: '↑';
  display: inline-block;
  transition: .5s;
}
th.tablesorter-headerAsc::after,
th.tablesorter-headerDesc::after{
  color: #ffbe00;
}
table th.tablesorter-headerDesc::after{
  transform: rotateX(180deg);
}

tablesorterまとめ

本当に便利なtablesorter。
簡易なソート機能であれば、十分です。
CSSだけでいろいろな表示ができそう。

関係ないですが、テーブルの中身がなぜトム・ハンクスか。
そりゃ、もちろん好きだからですよ！

フォレスト・ガンプ製作時、資金面で難航していたらしく、そんな時トム・ハンクスは、ギャラ約10億の契約を興行収入の10%を後から貰う契約にし、結果70億手に入れたとのこと。
高感度も高いし無敵やん。
尊敬しています、トム・ハンクスさん。

めちゃくちゃ、話それましたが、tablesorter感謝です。