dataTables のソート機能について

dataTables はデータを JavaScript 内に記述することによって、ソートが可能になっている。
上記に記述はしたが、Internet Explorer 6.x でも動作することを確認した。
サンプルコードは上記のページにも記述されているが、いつなくなるかもわからないので記述しておく。

<html>
    <head>
        <!-- 実行環境にあわせて jQuery がある場所を修正する -->
        <script type="text/javascript" language="javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>
        <!-- 実行環境にあわせて dataTables がある場所を修正する -->
        <script type="text/javascript" language="javascript" src="/js/jquery/jquery.dataTables.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                /*
                 * id 属性名 demo が設定されている要素(タグ)の中に 
                 * 「<table id="example"></table>」を JavaScript の DOM を操作して追加している。
                 * 「<table id="example"></table>」を body タグ内に書く場合は、
                 * 「$('#demo').html('<table id="example"></table>');」を記述する必要はない。
                */
                $('#demo').html('<table id="example"></table>');
                /* id 属性名 example を持つ table タグ内に子要素を追加する */
                $('#example').dataTable( {
                    "aaData": [
                            /* Reduced data set */
                            [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
                            [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
                            [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
                            [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
                            [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
                            [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
                            [ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
                            [ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
                            [ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
                            [ "Webkit", "Safari 1.3", "OSX.3", 312.8", "A" ],
                            [ "Webkit", "Safari 2.0", "OSX.4+", 419.3", "A" ],
                            [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
                    ],
                    "aoColumns": [
                            /* sTitle は該当データの th 要素の text として割り当てられる名称 */
                            { "sTitle": "Engine" },
                            { "sTitle": "Browser" },
                            { "sTitle": "Platform" },
                            /* sClass は該当データの td 属性としてに割り当てられる class の名称 */
                            /* sType は td 要素の text の型を明示的にしてする */
                            { "sTitle": "Version", "sClass": "center", "sType": "numeric" },
                            { "sTitle": "Grade",   "sClass": "center" }
                    ]
                } );    
            } );
        </script>
    </head>
    <body id="dt_example">
        <!-- dataTables の DOM 操作開始位置 -->
        <div id="demo"><!-- table タグが記述されていないことに注意!! --></div>
        <!-- dataTables の DOM 操作終了位置 -->
    </body>
</html>

特長

JavaScript 内にデータを記述することで実現しているため、Flexgrid のようにソートを SQL に頼る必要がない。
上記の特長から、外部から引数を取得して、SQL 文を生成する必要がない。
JSON や XML を動的に生成できるように実装する必要がない。

実際に利用するにあたって

FireFox の AddOn である FireBug があると便利。
JavaScript から操作される DOM もHTML タブから確認ができる。
FireFox の AddOn である Web Developer (日本語化されたものもある) があると便利。
CSS を記述してレイアウトを整える際に重宝する。