こんにちは！しーま（@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秒で登録できる！／
首都圏の求人に特化！
正社員並みの保障は魅力です！
