JavaScript PR

jquery.tablesorter.jsを使ってテーブル(table)の見出し(th)タグクリックでソート(sort)する方法

記事内に商品プロモーションを含む場合があります

jquery.tablesorter.jsを使ってテーブル(table)の見出し(th)タグをクリックすると、その要素(tdタグ)が降順・昇順でソート(sort)する方法をご紹介します。

テーブル(table)をソートするCSSの記述

※必要に応じて変更して下さい。

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0 10px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
}
table{
	border:solid 1px #333333;
}
th{
	background-color:#333333;
	color:#FFFFFF;
	border-bottom:solid 1px #333333;
	cursor:pointer;
}
th:hover{
	background-color:#FFFFFF;
	color:#333333;
	border-bottom:solid 1px #333333; 
}
th, td{
	padding:10px;
	font-weight:normal;
}
-->
</style>

jquery.tablesorter.jsを使ってテーブル(table)をソート(sort)するJavaScriptの記述

※jqueryとjquery.tablesorter.jsファイルを読み込みます。$(‘#myTable’).tablesorter()でソートしたいテーブル(id=”myTable”)を指定します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function(){
	$('#myTable').tablesorter();
});
</script>

jquery.tablesorter.jsを使ってテーブル(table)をソート(sort)するHTMLの記述

※ソートさせたいテーブル(table)の記述です。テーブルの見出し(th)タグをクリックするとその要素(tdタグ)が降順・昇順でソート(sort)されます。

<table id="myTable" cellpadding="0" cellspacing="0"> 

<thead> 

<tr>

<th>No</th>


<th>Category</th>


<th>URL</th>

</tr>

</thead>


<tbody>

<tr>

<td>1</td>


<td>css</td>


<td><a href="https://dad-union.com/category/css" target="_blank">https://dad-union.com/category/css</a></td>

</tr>


<tr>

<td>2</td>


<td>JavaScript</td>


<td><a href="https://dad-union.com/category/javascript" target="_blank">https://dad-union.com/category/javascript</a></td>

</tr>


<tr>

<td>3</td>


<td>jQuery</td>


<td><a href="https://dad-union.com/category/jquery" target="_blank">https://dad-union.com/category/jquery</a></td>

</tr>


<tr>

<td>4</td>


<td>PHP</td>


<td><a href="https://dad-union.com/category/php" target="_blank">https://dad-union.com/category/php</a></td>

</tr>

</tbody>

</table>

テーブルタグをソート可能にするデモページ

テーブルタグをソート可能にするデモ

対応ブラウザはIE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+の様です。Chromeでも大丈夫そうです。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。