はてなブログでjQuery テーブルの並び替え機能を使ってみた!
はてなブログでjQueryが動くことが分かったので、次は活用してみましょう。
余談
私の職業は業務系ソフトのプログラマーなのですが、web関係のソフトは書いてきませんでした。(避けていた)
イントラネットって名前が世の中に出だした頃(10年以上前)、「ソフトのメンテナンスがサーバーで出来る、PCに配布しなくてもいいんだ。重宝するね~~」とweb構築を採用した時の話し、一覧表をテーブル形式で表示、ユーザー様に見せた時、「並び替え出来ないの?絞込検索したいけどできる?」等の要望が出て、改良する事に。
AccessやVBなら標準でその程度の機能は使えて、いちいちプログラム書く必要無いんだけど・・・、webって使えね!面倒と使わなくなりました。
イントラネットって名前が世の中に出だした頃(10年以上前)、「ソフトのメンテナンスがサーバーで出来る、PCに配布しなくてもいいんだ。重宝するね~~」とweb構築を採用した時の話し、一覧表をテーブル形式で表示、ユーザー様に見せた時、「並び替え出来ないの?絞込検索したいけどできる?」等の要望が出て、改良する事に。
AccessやVBなら標準でその程度の機能は使えて、いちいちプログラム書く必要無いんだけど・・・、webって使えね!面倒と使わなくなりました。
とは言え、web利用って気になる技術でしたので、Flashでデータ操作ができるって解った時に再チャレンジ。Adobe Flexってやつです。
見栄えも良いし、並び替えも簡単、これイイね!と2本ぐらい作りました。
今はオープンソースもあるようですが、その当時は有償で、しかもAction Scriptって難解な言語を覚えないといけないハードルがあり、私の周りでは普及しませんでした。
お客さんが採用しないと、勝手に増殖もできないのでボツ。
今思うとFlashって流行ってないので良かったかも。
そんなこんなでweb開発については浦島太郎でした。
jQueryも実はよく知らない。初心者って事です。
そんな私が驚いた、一覧表を簡単に並び替えする機能。
jQueryならdataTableライブラリーを使えば簡単です。
これさえあれば、ユーザー様に並び替えはって聞かれても、「ここをクリックすればいいんですよ」って、どや顔できます。
見栄えも良いし、並び替えも簡単、これイイね!と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 でググって下さい。