ソートできる表を作成するjavascript「sorttable.js」
javascriptでソートが出来る表を作るではテーブルで作った表を降順・昇順で並べ替えられる「Table Sorter」を紹介しました。
しかし、as day pass byで公開されている「sorttable」を使用すると、ソートされない列(横、縦ともに)を作ったり、ソートされる順序をあらかじめ決めたりすることができます。
使用方法
sorttableからsorttable.jsをダウンロードし、head内に挿入します。
次にソート対象となるtableにclass属性としてsortableを付与します。
また表のヘッダーをや項目を以下のサンプルのように書き込みます。
<table class="sortable">
<thead>
<tr><th>Person</th><th>Monthly pay</th><th class="sorttable_nosort">NoSort</th></tr>
</thead>
<tbody>
<tr><td sorttable_customkey="1">Jan Molby</td><td>£12,000</td><td>No.1</td></tr>
<tr><td>Steve Nicol</td><td>£8,500</td><td>N/A</td></tr>
<tr><td>Steve McMahon</td><td>£9,200</td><td>N/A</td></tr>
<tr><td>John Barnes</td><td>£15,300</td><td>N/A</td></tr>
</tbody>
<tfoot>
<tr><td>TOTAL</td><td>£45,000</td></tr>
</tfoot>
</table>
thead内にあるNoSortという項目ではthのclass属性としてsorttable_nosortを付与しています。
この属性があると縦列ではソートされません。
横列では、tfootで囲むことで一番下に固定して置きたい合計のようなものソート対象にしないことが可能です。
さらに、Jan Molbyのところでtdに指定しているsorttable_customkey="1"ではソートの順番を決めることが出来ます。
数字は項目数付与することが出来、降順・昇順ともに数字に合わせてソートされます。
これらを組み合わせることで日本語の表にも対応することが出来そうです。
サンプル
| Person | Monthly pay | NoSort |
| Jan Molby | £12,000 | No.1 |
| Steve Nicol | £8,500 | N/A |
| Steve McMahon | £9,200 | N/A |
| John Barnes | £15,300 | N/A |
| TOTAL | £45,000 |
Javascriptサンプルページ一覧
skuare.net