tablesorterの使い方について解説を行います。

こんにちは！しーま（@s59shima）です。

いつもブログをご覧いただきありがとうございます。

今回はこんな悩みや疑問のある方にに向けて記事を書きました。

読者

表（table）のデータを並び替えたいんだけど、なかなか上手くいかない。
簡単に並び替えてくれるライブラリ（部品）などあるかなー。

時間をかけずに表の並び替えを実現したい方や「tablesorterを使ってみたい」という方におすすめの記事です。

tablesorterは導入が簡単で、あっという間にテーブル要素のデータを並び替えてくる便利なライブラリです。

Contents

tablesorterの使い方
さらに便利な使い方
本記事のまとめ

tablesorterの使い方

JSファイルの読込
テーブル要素にID属性を追加
ファイル読込時にtablesorterを実行

手順はとても簡単です。それでは、順を追って解説します。

JSファイルの読込

「 jquery.tablesorter.min.js 」というJSファイルを使用します。こちらをダウンロードしたらHTMLファイルに指定します。指定方法は以下の通りになります。

<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>

テーブル要素にID属性を追加

並び替えを行いたいテーブル要素にID属性を追加します。属性値は特に指定ありませんが、今回は「sorter」とします。

<table id="sorter">

ファイル読込時にtablesorterを実行

最後にファイル読込時にtablesorterを実行するだけです。基本的にはこれだけで並び替えが実現できます。

$("#sorter").tablesorter();

ここまでの手順をコード化します。

<!DOCTYPE html>
 <html lang="ja">
  <head>
   <meta charset="utf-8">
   <title>tablesorter</title>
   <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
   <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
   <script type="text/javascript" src="js/script.js"></script>
  </head>
  <body>
   <table id="sorter">
    <thead>
     <tr><th>Id</th><th>Name</th><th>Age</th></tr>
    </thead>
    <tbody>
     <tr><td>1</td><td>aaa</td><td>25<td></tr>
     <tr><td>2</td><td>bbb</td><td>30<td></tr>
     <tr><td>3</td><td>ccc</td><td>35<td></tr>
     <tr><td>4</td><td>ddd</td><td>40<td></tr>
     <tr><td>5</td><td>eee</td><td>45<td></tr>
    </tbody>
   </table>
  </body>
 </html>

とても便利なライブラリです。さらに便利な使い方を解説したいと思います。

さらに便利な使い方

テーマの読込
一部の項目に並び替え無効
行単位に背景色を変更

テーマの読込

ダウンロードした際にCSSファイルも一緒にダウンロードされるので、そちらを使用します。使用することでtableの背景色や罫線など、見栄えがきれいになります。手順はCSSファイルの読込と対象のtable要素にクラス属性を追加します。

<link rel="stylesheet" type="text/css" href="css/style.css">

<table id="sorter" class="tablesorter">

一部の項目に並び替え無効

テーブルの項目で並び替えを行いたくない場合もあるかもしれません。その時は並び替えを無効にします。指定方法は以下になります。下記の例はID列を無効にしています。

headers:{
 0:{sorter:false}
}

行単位に背景色を変更

行が数十～数百行になると一行一行確認するのは大変かと思います。そんな時は背景色を変更しましょう！指定方法は以下になります。

widgets: ['zebra']

最終的なコードと画面は以下のようになります。

<!DOCTYPE html>
 <html lang="ja">
  <head>
   <meta charset="utf-8">
   <title>tablesorter</title>
   <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
   <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
   <script type="text/javascript" src="js/script.js"></script>
   <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
   <table id="sorter" class="tablesorter">
    <thead>
     <tr><th>Id</th><th>Name</th><th>Age</th></tr>
    </thead>
    <tbody>
     <tr><td>1</td><td>aaa</td><td>25<td></tr>
     <tr><td>2</td><td>bbb</td><td>30<td></tr>
     <tr><td>3</td><td>ccc</td><td>35<td></tr>
     <tr><td>4</td><td>ddd</td><td>40<td></tr>
     <tr><td>5</td><td>eee</td><td>45<td></tr>
    </tbody>
   </table>
  </body>
</html>

$(document).ready(function() {
  $("#sorter").tablesorter({
    widgets: ['zebra'],
    headers:{
      0:{sorter:false}
    }
  });
});

本記事のまとめ

今回は「tablesorterの使い方とサンプル」について解説しました。

最後まで読んでいただきありがとうございます(*^-^*)

本記事をまとめると以下の通りです。

表（table）のデータを並び替える場合、tablesorter はオススメです。

以下の通り、便利な活用方法もアリ！

テーマの読込
一部の項目に並び替え無効
行単位に背景色を変更

＼登録無料！60秒で登録できる！／

首都圏の求人に特化！
正社員並みの保障は魅力です！

無料登録はこちら