tablesorterで単位付数値、漢字を含む列を正しくソートする方法
tablesorterを使用するとテーブルを簡単にソートできる。しかし、デフォルトのままだと単位が付いた数値とか漢字が含まれる列が思うようにソートできないが、ソートのオプションsorterを指定することで解決できる。
・単位が付いた数値は文字列としてソートされるので意図した順に並ばないが、sorterオプションでdigitを指定することで解消する。
・漢字を含む文字列が混在するとソート機能自体が効かなくなるがsortオプションtextでを指定することで解消する。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<!--
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/jquery-latest.js"></script>
-->
<script type="text/javascript" src="js/main.js"></script>
<title>jQuery Sample</title>
<script>
$(function(){
$("#myTable").tablesorter({
headers: {
2: { sorter:"digit"},
4: { sorter:"text"}
}
});
});
</script>
</head>
<body>
<table border="1" id="myTable">
<thead>
<tr>
<th>列0<br />(No.)</th>
<th>列1<br />(単位付数値:デフォルト)</th>
<th>列2<br />(単位付数値→sorter: "digit")</th>
<th>列3<br />(漢字混在:デフォルト)</th>
<th>列4<br />(漢字混在→sorter: "text")</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2分</td>
<td>2分</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>19分</td>
<td>19分</td>
<td>高橋</td>
<td>高橋</td>
</tr>
<tr>
<td>3</td>
<td>15分</td>
<td>15分</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>4</td>
<td>1分</td>
<td>1分</td>
<td>E400F</td>
<td>E400F</td>
</tr>
<tr>
<td>5</td>
<td>62分</td>
<td>62分</td>
<td>佐々木</td>
<td>佐々木</td>
</tr>
</tbody>
</table>
</body>
</html>