jqueryでtableを整形する便利プラグインDataTables!
- 2016/8/11
- システム
- この記事は約1分で読めます。
jqueryとDataTablesでお手軽table操作
Webページで動的なデータの表を作ることってあると思うんですが、
ページング、検索、表示件数の制御などなど、
やることって大量にありますよね!?
それを一瞬で実装してくれるプラグインがこれ!!!
DataTables
jqueryを使っていて、tableを整形したい方には、
うってつけ(^o^)
使い方もとても簡単!
DataTablesでできる機能
・表示件数の制限
・検索
・ページング
とりあえず、これはいるだろうっていう機能は、
余裕で入ってます。
DataTablesの導入方法
jqueryのバージョンは、1.9.1です。
DataTablesのバージョンは、1.9.2です。
・HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="/js/jquery-1.9.1.min.js"></script> <script src="/js/jquery.dataTables-1.9.2.min.js"></script> <script> jQuery(function($){ $(".datatable").dataTable(); }); </script> <title></title> </head> <body> <table class="datatable"> <thead> <tr><th>No</th><th>果物</th></tr> </thead> <tbody> <tr><td>1</td><td>りんご</td></tr> <tr><td>2</td><td>パイナップル</td></tr> <tr><td>3</td><td>もも</td></tr> <tr><td>4</td><td>いちご</td></tr> <tr><td>5</td><td>なし</td></tr> <tr><td>6</td><td>ぶどう</td></tr> <tr><td>7</td><td>みかん</td></tr> <tr><td>8</td><td>グレープフルーツ</td></tr> <tr><td>9</td><td>バナナ</td></tr> <tr><td>10</td><td>キウイ</td></tr> </tbody> </table> </body> </html> |
・jqueryでdataTablesの初期設定
DataTablesのバージョンが1.9.X での設定になります。
1.10.X 以降で記述方法が多少変わるのでご注意下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$('.datatable').dataTable({ // 表示件数の選択肢 "aLengthMenu": [25, 50, 100], // 表示件数のデフォルトの値 "iDisplayLength": 25, // 表示状況をクッキーに保存するかどうか "bStateSave": true, // 検索対象にしない列の選択 "aoColumnDefs": [ { "bSearchable": false, "aTargets": [ 0 ] } ], // Y軸方向にtableをスクロールできるようにするのと、tableの高さの決定 "sScrollY": 400, "sPaginationType": "bootstrap", // 表示される文字の決定 "oLanguage": { // ページングの文字を決定 "oPaginate": { "sFirst": "先頭", "sLast": "最後", "sNext": "次へ", "sPrevious": "前へ" }, // tableに表示されるメッセージを設定 "sEmptyTable": "データが登録されていません", "sInfo": "_TOTAL_ 件中 _START_ 件から _END_ 件までを表示", "sInfoEmpty": "", "sInfoFiltered": "(_MAX_ 件からの絞り込み表示)", "sInfoPostFix": "", "sInfoThousands": ",", "sLengthMenu": "1ページあたりの表示件数: _MENU_", "sLoadingRecords": "ロード中...", "sProcessing": "処理中...", "sSearch": "検索:", "sZeroRecords": "該当するデータが見つかりませんでした", "sLengthMenu": "_MENU_ 件 表示" } } ); |
最後に
DataTablesは、便利すぎます!
サーバサイドでの開発工数をグッと短縮できます!
しかも、サーバへのアクセスも減るので、
ユーザビリティ的にも、なお良し
これを機会に、DataTablesを使って、
table要素は、jqueryでごにょごにょしましょう
The following two tabs change content below.
デミ
Z or R Twice
で検索すると…
最新記事 by デミ (全て見る)
- 【20分で完了】MacにDocker for Macのインストール - 2017/02/02
- 【2017年版】Web接客ツール9社を比較してみた - 2017/01/26
- 【昼休み中に完了!】Macで最新Ruby、Railsのインストールから画面表示まで - 2017/01/19