TAGS: JavaScript | table | ソート
JavaScript Table Sorterは、データの並べ替え機能を実現させたい場合、便利なJavaScriptライブラリです。

デモ


機能・特徴


◇ テーブルソート。既存のHTMLソース(table)に手を加えず簡単にソート機能を追加してくれます。
◇ 軽量。ファイルサイズはわずか1.7KB。
◇ 無料。商用・非商用を問わず無料で利用可能です。
◇ 使い方簡単。
◇ 主要なブラウザーで動作。Firefox 2/3, IE 6/7/8, Opera, Safari, Chromeなどの主要なブラウザーで動作可能。


使い方


1)<head>...</head>の中に次のように記述します。
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>


2)HTMLソース(table要素)
    <table cellpadding="0" cellspacing="0" border="0" class="sortable" id="sorter">
        <tr>
            <th class="nosort">ID</th>

            <th>Name</th>
            <th>Phone</th>
            <th>Email</th>
            <th>City</th>
            <th>State</th>
            <th>Zip Code</th>

        </tr>
        <tr>
            <td>1</td>
            <td>Kaseem Huber</td>
            <td>(587) 117-5521</td>
            <td>.@samecore.org</td>
            <td>Burlington</td>

            <td>DE</td>
            <td>81070</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Oleg Michael</td>
            <td>(539) 184-8550</td>

            <td>pages@andit.edu</td>
            <td>Covina</td>
            <td>SC</td>
            <td>48758</td>
        </tr>
        ...
    </table>


3)Javascriptで初期化
<script type="text/javascript">
var sorter=new table.sorter("sorter");
sorter.init("sorter",1);
</script>

Sponsored Link


有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Comments

用户名 (required)

Email (will not be published) (required)

URL

Evaluation