• RSS

[JS]テーブルを手軽にソートできるjQueryプラグイン「Stupid jQuery Table Sort」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

テーブルを手軽にソートできる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」にマウスを載せてクリックするとソートされます。
intfloatstring
15-.18banana
9536coke
2-152.5apple
-5388.5zebra
195-858orange



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください