【jQuery入門】tablesorterの使い方とサンプル

jQueryライブラリのtablesorterの解説プログラミング入門
スポンサーリンク

こんにちは!しーま(@s59shima)です。

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

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

読者
読者

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

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

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秒で登録できる!/

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

Javaスキルで悩んでいる方必見!本気で学習できる環境を探してみよう!
詳細はこちら
Javaスキルで悩んでいる方必見!本気で学習できる環境を探してみよう!
詳細はこちら
タイトルとURLをコピーしました