ソート・フィルター・ページャー付きのテーブル「Datatable」
当ページのリンクには広告が含まれています。
スポンサーリンク
ソート・フィルター・ページャー付きのテーブルを実装するプラグイン「Datatable」を紹介します。
jQueryプラグイン「Datatable」
このプラグインを使えば、ソート・フィルター・ページャー……などの高機能テーブルを実装することができます。
また、Bootstap に対応/非対応のCSSも用意されているので、便利!
スポンサーリンク
それではデモページのテーブルをご覧ください。
デモのソース(HTML + jQuery)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Datatable のデモでーす。"> <title>Datatable - jQuery Plugin Demo</title> <link rel="stylesheet" href="css/datatable.css" type="text/css" media="screen" /> </head> <body> <h1>Datatable のデモでーす。</h1> <p>タイトルをクリックすると、ソート。</p> <table id="demo"> <thead> <tr> <th>名前</th> <th>点数</th> <th>評価</th> </tr> </thead> <tbody> <tr> <td>佐藤</td> <td>100</td> <td>A</td> </tr> <tr> <td>鈴木</td> <td>90</td> <td>A</td> </tr> <tr> <td>高橋</td> <td>80</td> <td>B</td> </tr> <tr> <td>田中</td> <td>70</td> <td>B</td> </tr> <tr> <td>伊藤</td> <td>60</td> <td>C</td> </tr> <tr> <td>渡辺</td> <td>40</td> <td>D</td> </tr> <tr> <td>中村</td> <td>90</td> <td>A</td> </tr> <tr> <td>小林</td> <td>70</td> <td>B</td> </tr> <tr> <td>加藤</td> <td>80</td> <td>A</td> </tr> </tbody> </table> <div class="paging"></div> <p><a href="https://webkaru.net/jquery-plugin/datatable/">「jQueryプラグインまとめ」に戻る</a></p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/datatable.min.js"></script> <script> $('#demo').datatable({ pageSize: 5, sort: [true, true, true], filters: [false, false, 'select'] }); </script> </body> </html>
スポンサーリンク