ほりくり@ほりでぃWebクリエーター

TableをソートするJQueryプラグイン

投稿日:2013年6月19日

更新日:2013年7月11日

tableの要素を動的に並び替えることのできるJQuery『Stupid jQuery Table Sort』

http://joequery.github.io/Stupid-Table-Plugin/

テーブルの列ヘッダをクリックすると、
その列をキーにして要素をソートしてくれます。

使い方


まずサイトの右上からプラグインをダウンロードします。

StupidjQueryTableSort1


head内に下記コードを記述

  	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 	<script src="./stupidtable.js?dev"></script>

	<script type="text/javascript">
	$(function(){
	    $("#sort_table").stupidtable();
	});
	</script>

jsのパスは適宜変更してください。
#sort_tableは対象となるテーブルに付けるお好きなIDで。


Body内にTABLEを作成。

	<table id="sort_table">
		<thead>
			<tr>
			<th data-sort="type-int">number</th>
			<th data-sort="type-string">name</th>
			</tr>
		</thead>
		<tbody>
			<tr>
			<td>1</td>
			<td>takahashi</td>
			</tr>
			<tr>
			<td>2</td>
			<td>ito</td>
			</tr>
		</tbody>
	</table>

ソート対象となる列ヘッダにdata-sortを記述します。
data-sort=”int” → 整数
data-sort=”float” → 少数
data-sort=”string” → 文字列


以上で、テーブルにソート機能を追加することが可能です。

サンプルサイト