寝太郎の江戸風呂。ね！

[PR]

2024/04/16 (Tue.)

Google Visualization Table の page イベント

前回の「Google Visualization Events」では、Google Visualization のイベント処理の設定方法とそれを使った簡単な例として select イベントを紹介しました。今回は Google Visualization Table に用意されている page イベントについて述べましょう。

Google Visualization Table の 標準のページ処理

Google Visualization Table では、draw メソッドを実行する時に設定する第二引数であるテーブルオプションの設定でページ化を実現します。４行ずつのページにする設定は次のとおりです。

table.draw(data, {page: 'enable', pageSize:4});

こう設定することでテーブルの左下にページナビゲーションボタンが出現して、次のページに進めたり、前のページに戻れるようになります。

Google Visualization Table の page イベントの設定

Google Visualization Table では、標準のページ処理ではなく、カスタマイズした処理を設定できる方法が用意されています。それはページナビゲーションボタンをクリックした時に指定した関数を実行するというイベント処理の方法です。これを実現するためには、まずテーブルオプションの page プロパティの値を'event'に設定します。そして、page イベントが発生した時に実行する関数を登録します。

table.draw(data,{page:'event', pageSize:4, startPage:1});

google.visualization.events.addListener(
 table,
 'page',
 pageHandler
);
function pageHandler(e) {
   alert(e['page']);
}

この例では、テーブルオプションの startPage の値を 1 に設定しているで、最初に表示されるのは２ページ目です。そして、前ページボタンを押すと「0」、次ページボタンを押すと「2」がアラート表示されます。しかし、それで終わりです。前ページも次ページも表示されません。

page イベントからの再表示

テーブルオプションの page プロパティの値を'event'に設定した場合、標準のページ処理は行われなくなります。例えば、次ページボタンを押しても次のページは表示されません。ただ次ページの番号がイベント処理関数に送られるだけです。

次ページボタンを押したら、次のページが表示されるようにするには、イベント処理関数でその処理を記述しなければなりません。すなわち、送られてきたイベントオブジェクトから page プロパティを取得します。そして、この値をテーブルオプションの startPage の値としてテーブルを再表示するのです。

function pageHandler(e) {
   alert(e['page']);
   var options={page:'event', pageSize:4, startPage:e['page']};

   table.draw(data,options);

}

サンプルページ

次のページでは、上記の記述例を実際に確かめることできます。

参考

2010/10/18 (Mon.) Trackback() Comment(0) Google Visualization