Google Visualization Table では、データソースとして Google Spreadsheets を利用できます。ローカルなデータをデータテーブルとして利用することもできますが、本格的なアプリケーションを構築するのなら、Google Spreadsheets を利用することになるでしょう。
Google Visualization Table でデータソースとして Google Spreadsheets を利用する場合には、クエリを発行して、そのレスポンスからデータテーブルを取得します。ここでは、取得したデータテーブルについて、ローカル側でページ処理する方法で、ページナビゲーション付のテーブルを表示します。
var dataSource="https://spreadsheets.google.com/ccc?key=0AvtCwTeZPCemdFpTWGUxSW9lcVNEeEYyeE9aM3B3RGc&hl=ja" ; var query={}; var statement='select * order by A desc' var options={page:"enable", pageSize:5, sort:'disable'}; var table={}; var container={}; function init(){ query = new google.visualization.Query(dataSource); container=document.getElementById('res'); table = new google.visualization.Table(container); query.setQuery(statement); query.send(handleResponse); } function handleResponse(response){ if(response.isError()) { container.innerHTML=response.getDetailedMessage(); return; } var data = response.getDataTable(); table.draw(data,options); } google.load('visualization', '1', {'packages':['table']}); google.setOnLoadCallback(init);
この方法では、クエリの条件に一致するデータを初めにすべてローカル側に取り込みます。したがって、該当するデータの量が多い場合は、表示されないデータが無駄になる可能性があります。しかしながら、反面、ローカル側にすべてのデータが保持されているので、ページ移動はスムーズでしょう。
該当するデータの量が膨大な場合だが、表示することになるデータが少ない場合には、次に示す「Google Visualization Query Table のページイベントの処理の例」を利用することをお勧めします