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

jQueryプラグイン・ライブラリ

2013.06.022014.08.30

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

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

※ライセンスはMIT licenseです。

Stupid jQuery Table Sortのダウンロード
Stupid jQuery Table Sortの設置
基本的な動き

Stupid jQuery Table Sortのダウンロード

以下のサイトより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>

$(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>