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

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

Contents

テーブル（table）をソートするCSSの記述
jquery.tablesorter.jsを使ってテーブル（table）をソート（sort）するJavaScriptの記述
jquery.tablesorter.jsを使ってテーブル（table）をソート（sort）するHTMLの記述
テーブルタグをソート可能にするデモページ

テーブル（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>