Google Visualization Table では、データソースとして Google Spreadsheets を利用できます。ローカルなデータをデータテーブルとして利用することもできますが、本格的なアプリケーションを構築するのなら、Google Spreadsheets を利用することになるでしょう。
Google Visualization Table でデータソースとして Google Spreadsheets を利用する場合には、クエリを発行して、そのレスポンスからデータテーブルを取得します。ここでは、クエリを発行する際に取得するデータ数を制限しておき、必要に応じてクエリを再発行して次のデータを取得する方法を紹介します。
この方法は、該当するデータの量が膨大な場合だが、表示することになるデータが少ない場合に有効です。該当するデータの多くを表示する可能性が高い場合には、ローカル側で該当するデータをすべて保持する「Google Visualization Query Table の標準ページ処理の例」で示す方法の方がよいでしょう
var dataSource="https://spreadsheets.google.com/ccc?key=0AvtCwTeZPCemdFpTWGUxSW9lcVNEeEYyeE9aM3B3RGc&hl=ja" ; var pageSize=5; var sourcePage=0; var limit=pageSize+1; var offset=sourcePage * pageSize; var statement='select * order by A desc limit '+ limit+ ' offset '; var statement2=statement + offset; var options={ page:"event", pageSize:pageSize, startPage:0, pagingButtonsConfiguration:'both', showRowNumber:true, firstRowNumber:1, sort:'disable' }; var query={}; var table={}; var dataTable={}; var container={}; function init(){ query = new google.visualization.Query(dataSource); container=document.getElementById('res'); table = new google.visualization.Table(container); google.visualization.events.addListener(table, 'page', pageHandler); query.setQuery(statement2); query.send(handleResponse); } function handleResponse(response){ if(response.isError()) { container.innerHTML=response.getDetailedMessage(); return; } dataTable = response.getDataTable(); table.draw(dataTable,options); } function pageHandler(e){ alert(e['page']); var indexPage=sourcePage + e['page']; if(indexPage<0)return false; if (e['page']==1 && dataTable.getNumberOfRows() <= pageSize)return false; sourcePage=indexPage; statement2=statement+ (sourcePage * pageSize); options['firstRowNumber']=(sourcePage * pageSize)+1; query.setQuery(statement2); query.send(handleResponse); } google.load('visualization', '1', {'packages':['table']}); google.setOnLoadCallback(init);
page イベントを処理することを示すため、あえて イベントオブジェクトの page プロパティの値をアラート表示させています。
枠組みは次のとおりです。
sourcePageがマイナスになったり、実頁より多くなるときはクエリは実行しない。
table.draw(dataTable,options) でテーブルを表示する。
クエリを実行する
ラッパを使った別のソースコードのページは、「Google Visualization Query Table のページイベントの処理の例(wrapper版) 」です。
クエリであらかじめ件数を制限することなく、ローカル側でページ処理する方法です。
Google Visualization Query Table の標準ページ処理の例