2024
11
23
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() Comment(0) Google Visualization
Comments
Trackback
Trackback for this entry：
