motogp fan

motogp ファンによる、雑ブログ、ガジェットネタも

はてなブログでjQuery テーブルの並び替え機能を使ってみた!

はてなブログjQueryが動くことが分かったので、次は活用してみましょう。

余談

私の職業は業務系ソフトのプログラマーなのですが、web関係のソフトは書いてきませんでした。(避けていた)
イントラネットって名前が世の中に出だした頃(10年以上前)、「ソフトのメンテナンスがサーバーで出来る、PCに配布しなくてもいいんだ。重宝するね~~」とweb構築を採用した時の話し、一覧表をテーブル形式で表示、ユーザー様に見せた時、「並び替え出来ないの?絞込検索したいけどできる?」等の要望が出て、改良する事に。
AccessVBなら標準でその程度の機能は使えて、いちいちプログラム書く必要無いんだけど・・・、webって使えね!面倒と使わなくなりました。

とは言え、web利用って気になる技術でしたので、Flashでデータ操作ができるって解った時に再チャレンジ。Adobe Flexってやつです。
見栄えも良いし、並び替えも簡単、これイイね!と2本ぐらい作りました。
今はオープンソースもあるようですが、その当時は有償で、しかもAction Scriptって難解な言語を覚えないといけないハードルがあり、私の周りでは普及しませんでした。
お客さんが採用しないと、勝手に増殖もできないのでボツ。
今思うとFlashって流行ってないので良かったかも。

そんなこんなでweb開発については浦島太郎でした。
jQueryも実はよく知らない。初心者って事です。
そんな私が驚いた、一覧表を簡単に並び替えする機能。
jQueryならdataTableライブラリーを使えば簡単です。
これさえあれば、ユーザー様に並び替えはって聞かれても、「ここをクリックすればいいんですよ」って、どや顔できます。

では動かしてみましょう

 お題はチェコGPの結果。
表題クリックで並び替え、1ページの表示行数や、キーワードによる絞込もできます。
こりゃ~便利。

注意、テーブルの列数を全ての行で一致させないと、無言で動きません。


順位Noライダー国籍チームバイクタイム平均km
01 25 99 ロレンソ SPA MovistarYamaha YAMAHA 42'53.042 166.3 0
02 20 93 マルケス SPA RepsolHonda HONDA 42'57.504 166.0 4.462
03 16 46 ロッシ ITA MovistarYamaha YAMAHA 43'03.439 165.6 10.397
04 13 29 イアンノーネ ITA DucatiTeam DUCATI 43'06.113 165.4 13.071
05 11 26 ペドロサ SPA RepsolHonda HONDA 43'08.692 165.3 15.650
06 10 4 ドビチオーゾ ITA DucatiTeam DUCATI 43'08.767 165.2 15.725
07 9 38 スミス GBR YamahaTech3 YAMAHA 43'14.863 164.9 21.821
08 8 44 弟エスパルガロ SPA YamahaTech3 YAMAHA 43'16.282 164.8 23.240
09 7 41 兄エスパルガロ SPA TeamSUZUKI SUZUKI 43'36.826 163.5 43.784
10 6 9 ペトリッチ ITA PramacRacing DUCATI 43'38.303 163.4 45.261
11 5 68 ヘルナンデス COL PramacRacing DUCATI 43'43.015 163.1 49.973
12 4 45 レディング GBR EG00MarcVDS HONDA 43'43.216 163.1 50.174
13 3 19 バウティスタ SPA ApriliaGresini APRILIA 43'47.479 162.8 54.437
14 2 6 ブラドル GER ApriliaGresini APRILIA 43'47.666 162.8 54.624
15 1 76 バズ FRA ForwardRacing YH.FORWARD 43'53.358 162.4 1'00.316
16 0 8 バルベラ SPA AvintiaRacing DUCATI 43'54.637 162.4 1'01.595
17 0 69 ヘイデン USA Aspar HONDA 43'55.430 162.3 1'02.388
18 0 63 メッリオ FRA AvintiaRacing DUCATI 43'58.986 162.1 1'05.944
19 0 43 ミラー AUS LCR.Honda HONDA 44'04.449 161.8 1'11.407
20 0 71 コルティ ITA ForwardRacing YH.FORWARD 44'43.075 159.4 1'50.033
21 0 17 アブラハム CZE AB.Motoracing HONDA 44'55.697 158.7 2'02.655
R 0 25 ビニャーレス SPA TeamSUZUKI SUZUKI 29'31.557 164.6 7
R 0 35 クラッチロー GBR LCR.Honda HONDA 27'38.315 164.2 8
R 0 50 E.リバティ IRL Aspar HONDA 8'04.096 160.7 18
R 0 15 デ.アンジェルス RSM E-MotionIodaRacing ART 6'05.782 159.5 19

導入方法

HTML編集にて、前回のjQuery記事のソースに下記を追加する。
<!-- DATA TABES SCRIPT -->
<script src=\"https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js\" type=\"text/javascript\"></script>

 次にテーブルでデータ表を作ってIDを決める

<table id=\"sort-j1\" style=\"table-layout: fixed; font-size: 60%;\" width=\"100%\">

 
 
最後に決めたIDでdataTableが動くように設定

<!-- page script -->
<script type=\"text/javascript\">// <![CDATA[
(function($) {

$(function() {
            $(\"#sort1\").dataTable();
            $(\'#sort2\').dataTable({
                \"bPaginate\": true,
                \"bLengthChange\": false,
                \"bFilter\": false,
                \"bSort\": true,
                \"bInfo\": true,
                \"bAutoWidth\": false
            });
            $(\'#sort-j1\').dataTable({
                \"oLanguage\": {
                    \"sProcessing\": \"お待ち下さい\",
                    \"sLengthMenu\": \"_MENU_ 件表示\",
                    \"sZeroRecords\": \"データ無し\",
                    \"sInfo\": \"_START_ ~ _END_件(全_TOTAL_ 件)\",
                    \"sInfoEmpty\": \" 0 件中 0 から 0 まで表示\",
                    \"sInfoFiltered\": \"(全 _MAX_ 件より抽出)\",
                    \"sInfoPostFix\": \"\",
                    \"sSearch\": \"検索:\",
                    \"sUrl\": \"\",
                    \"oPaginate\": {
                        \"sFirst\": \"先頭 \",
                        \"sPrevious\": \"前ページ \",
                        \"sNext\": \" 次ページ\",
                        \"sLast\": \" 最後 \"
                    }
                },
                // 大量データ利用時、「処理中」メッセージを表示するかを設定
                bProcessing: true,
                // 初期表示の行数設定
                iDisplayLength: 10,
                // ページングボタンの制御
                // two_button:進むと戻る
                // full_numbers:全ボタン表示
                sPaginationType: \"full_numbers\",
                // ソート行を強調(cssクラスを指定)するかを設定
                bSortClasses: true,
                //検索(フィルタ)を表示するかを設定
                bFilter: true,
                //画面の表示件数を選択可能かを設定
                bLengthChange: true

            });
        });
})(jQuery);
// ]]></script>

 もっと詳しく知りたい方は、キーワード jquery.dataTables でググって下さい。
 

 

motagp.hatenablog.com

 

以上