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

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 のページイベントの処理の例」を利用することをお勧めします

Google Visualization Query Table のページイベントの処理の例

参考