忍者ブログ

2018
10
17

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/10/17 (Wed.)

2010
10
05

Google Visualization Table のページ処理。

Google Visualization の Table オブジェクトは、データテーブルのデータを HTML の TABLE として表現しますが、単に表を作成するだけではなく、そこに様々な機能を盛り込んでいます。そのような機能の中でも、ページ処理機能は、とても有用な機能です。今回は、このページ処理機能に焦点を当ててみましょう。

ここでいう「ページ処理機能」とは、一度に表示するデータの件数を定めておき、その次のデータ群を表示したいときは「続き」ボタンを、前を表示したいときは「戻る」ボタンを押すことにより、表示されるデータを切り替えるというものです。

Google Visualization Table でこのページ処理機能を利用するのは、とても簡単です。draw メソッドの第二引数の options オブジェクトに決められたパラメータを指定するだけでよいのです。

コードサンプルを示しましょう。data は、データテーブルオブジェクトとします。
 
  var container=document.getElementById('res');
  var table = new google.visualization.Table(container);
  var options={page:'enable'};
  table.draw(data, options);

container は、HTMLテーブルを表示する場所の要素です。上記の例では、id 属性が「res」である要素です。
new 演算子を使って、google.visualization.Table のインスタンスを生成します。
テーブル設定オプションをオブジェクト形式で記述します。ページングを行う場合には、上記のように「page:'enable'」と記述します。
そして、Table オブジェクトの draw メソッドを実行します。そうすると、container 要素内に、データテーブルのデータが、HTML テーブルとして表示されます。

draw メソッドの第二引数は省略可能です。これを省略した場合には、デフォルトの値が適用されます。
page プロパティのデフォルト値は、「enable」なので、オプション指定がなければ、ページングは行われません。

また、ページングを指定した場合に一度に表示される件数のデフォルト値は「10」です。これを変更したい場合は、「pageSize」プロパティで指定します。「pageSize」の指定は、ページングを指定した場合のみ有効です。
(例)var options={page:'enable', pageSize:20};

この他、最初に表示するページを指定することもできます。「startPage」プロパティがそれです。そのデフォルト値は「0」です。

それでは、この Google Visualization Table のページ処理機能を利用して、Google Spreadsheets のデータを表示するサンプルページを示しましょう。

■サンプルページ
gVss_query_page.html

PR

2010/10/05 (Tue.) Trackback(0) Comment(0) Google Visualization

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

09 2018/10 11
S M T W T F S
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

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア