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

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 プロパティの値をアラート表示させています。

枠組みは次のとおりです。