スポンサード

テーブルを手軽にソートできるjQueryプラグイン「Stupid jQuery Table Sort」のご紹介です。

非常にシンプルで軽量なスクリプトなので、ちょっとしたテーブルのソートに便利です。

ライセンスはMIT license。

Stupid jQuery Table Sort のダウンロード

以下のサイトより Stupid jQuery Table Sort のファイルをダウンロードします。

Stupid jQuery Table Sort の設置

jquery ファイルと一緒に stupidtable.js ファイルをhead 内に設置します。

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./stupidtable.js"></script>
<script>
    $(function(){
        $("table").stupidtable();
    });
</script>

基本的な動き

tableタグ内の th に data-sort="int" data-sort="float" data-sort="string" をそれぞれ指定します。

<table>
    <thead>
      <tr>
        <th data-sort="int">int</th>
        <th data-sort="float">float</th>
        <th data-sort="string">string</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>15</td>
        <td>-.18</td>
        <td>banana</td>
      </tr>
      <tr class="awesome">
        <td>95</td>
        <td>36</td>
        <td>coke</td>
      </tr>
      <tr>
        <td>2</td>
        <td>-152.5</td>
        <td>apple</td>
      </tr>
      <tr>
        <td>-53</td>
        <td>88.5</td>
        <td>zebra</td>
      </tr>
      <tr>
        <td>195</td>
        <td>-858</td>
        <td>orange</td>
      </tr>
    </tbody>
</table>

実際の動きは以下のようになります。
「int」「float」「string」にマウスを載せてクリックするとソートされます。

int	float	string
15	-.18	banana
95	36	coke
2	-152.5	apple
-53	88.5	zebra
195	-858	orange

スポンサード