ソートできる表を作成するjavascript「sorttable.js」

javascriptでソート出来る表を作る「Table Sorter」ではテーブルで作った表を降順・昇順で並べ替えられる「Table Sorter」を紹介しました。
しかし、as day pass byで公開されているsorttableを使用すると、ソートされない列(横、縦ともに)を作ったり、ソートされる順序をあらかじめ決めたりすることができるなど、「Table Sorter」と比較すると拡張性があります。
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"ではソートの順番を決めることが出来ます。
数字は項目数付与することが出来、降順・昇順ともに数字に合わせてソートされます。
これらを組み合わせることで日本語の表にも対応することが出来そうです。
ソートできる表を作成するjavascript「sorttable.js」サンプル

sponsors

「ソートできる表を作成するjavascript「sorttable.js」」をシェアする

記事作成:
記事URL:

TOP > > > ソートできる表を作成するjavascript「sorttable.js」