Web Development

<table class="tableSorter">
	<thead>
		<tr>
			<th class="ts-row-num">#</th>
			<th>製品名</th>
			<th>製品画像</th>
			<th class="ts-sort-as-number">高さ</th>
			<th class="ts-sort-as-number">幅</th>
			<th class="ts-sort-as-number">重さ</th>
			<th class="ts-sort-as-number">バッテリー容量</th>
			<th class="ts-sort-as-number">メモリ容量</th>
			<th class="ts-sort-as-number">価格</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>1</th>
			<td>iPhone</td>
			<td><img src="download/jQueryTableSorter/img/iPhone.jpg" /></td>
			<td>175</td>
			<td>67</td>
			<td>15</td>
			<td>3,000</td>
			<td>128</td>
			<td>-</td>
		</tr>
・・・
		<tr>
			<th>8</th>
			<td>iPhone 5C</td>
			<td><img src="download/jQueryTableSorter/img/iPhone5C.jpg" /></td>
			<td>200</td>
			<td>56</td>
			<td>106</td>
			<td>2,950</td>
			<td>1,024</td>
			<td>20,000</td>
		</tr>
	</tbody>
</table>

1. テーブルに.tableSorterクラスを付与する
   (※デフォルトのCSSを適用するためだけの目的)
   
   
2. ヘッダーカラムに必要なクラスを付与する
   

   クラス名	効果/目的
   .ts-row-num	列番号を示す項目。 ソートされ、行が入れ替わっても常に上から1、2、3・・・と表示
   .ts-sort-as-number	ソート方法を指定。 データを数値としてソート
   クラス名なし (デフォルト)	ソート方法を指定。 通常のテキストデータとしてソート

3. ページがロードされたら、対象リストエレメントに対し処理を実行する
   

   
   $(document).ready(function() {
   	$('.tableSorter').tableSorter();
   });