シンプルウェイ制作班|WEB制作スタッフブログ

多機能テーブルを作成する

2015年10月05日

多機能テーブル遅れて出てきてしまったちまきです。
貯めていたストックしていたネタが使えず、お待たせしましたがーん…

もう夏も終わり、少し肌寒くなり、本格的にらしくなりましたね晴れ
近頃は、私にとって、表とフォームと戦う日々でした。
そんな中、出会ったのが、 DataTables ですキラキラ
これを使えば、ただの表が、↓のように、検索・ソート・閲覧数選択、ができますびっくり

つくば市の最高・平均・最低気温及び降水量
最高気温( °C)平均気温( °C)最低気温( °C)降水量(mm)
01月 9 2.7 -3.2 43.8
02月 9.7 3.7 -2.2 51.6
03月 12.8 7.1 1.2 99.5
04月 18.3 12.5 6.6 105.6
05月 22 16.9 11.8 120.3
06月 24.6 20.2 16.3 133.1
07月 28.3 23.9 20.4 127.1
08月 30.2 25.5 21.8 130.6
09月 26.2 21.9 18.1 183.2
10月 20.9 16 11.3 165.9
11月 15.9 10 4.6 78.8
12月 11.4 5 -0.9 43.6


ちょっと、テーブル作りも楽しくなりますよね

===================

では、導入方法をご紹介しますにこにこ
  1. https://www.datatables.net/download/packagesからパッケージをダウンロードします。
  2. DataTables-X.XX.Xがダウンロードされたら、解凍をします。
  3. media フォルダの中にあるファイルを、”そのまま”または”選択して”ファイルを移動します。
    最低限必要なのは、
    • css/jquery.dataTables.min.css
    • js/jquery.dataTables.min.js
    • js/jquery.js ※jQueryを導入済みの場合は、必要ありません
    imageフォルダを入れておくと、ソートの際にでてくる▼が表示されます。

  4. テーブルのあるページに以下のように記述します。
    <head>
    ...
    <link rel="stylesheet" type="text/css" href="/css/jquery.dataTable
    s.min.css"/>
    ...
    </head>

    	...
    <script src="/js/jquery.js">
    <script src="/js/jquery.dataTables.min.js">
    ...

  5. <table>タグに任意のid属性を付与します。今回は <table id="myTable"> です。
    ※テーブルには必ず<thead>と<tbody>を使ってください。
  6. <script>~</script>に、以下のように記述を加えます。"#myTable"は、#はそのままで、5.で指定したidに変えてください。
    $(document).ready(function(){
    $('#myTable').DataTable();
    });

これで終わりです!!
簡単ですよね。

$('#myTable').DataTable({
//ここに設定を書き込めば
});
いろいろなことができます。
ここで使った表には、
"lengthMenu": [[3, 5, 10, -1], [3, 5, 10, "ALL"]]
を入れて、表示させる件数を変化させています。

ぜひ、試してみてください~笑

データは下記より使用させて頂きました。
気温と雨量の統計のページ : http://weather.time-j.net/Climate/Chart/tsukuba

では、失礼しますZZZ

同じカテゴリー(jQuery)の記事画像
シングルページについて
簡単にjQueryのカスタムビルドができるサイト「jQuery Builder」
reveal.jsでPowerPointのプレゼン資料みたいなページ
jqueryを使いこなす
jQueryを導入する
同じカテゴリー(jQuery)の記事
 シングルページについて (2014-12-18 18:13)
 簡単にjQueryのカスタムビルドができるサイト「jQuery Builder」 (2014-04-07 16:59)
 reveal.jsでPowerPointのプレゼン資料みたいなページ (2014-01-06 18:07)
 ColorBoxでiframeを開く (2012-08-23 12:47)
 jquery で要素の数を数える (2011-09-12 17:37)
 jqueryを使いこなす (2011-07-04 16:06)
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。

コメントフォーム

名前:
メール:
URL:
コメント:
上の画像に書かれている文字を入力して下さい

<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

過去記事
最近のコメント
QRコード
QRCODE
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 2人
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。

このページの先頭へ