Google Visualization Query Table のページイベントの処理の例（wrapper版）

Google Visualization Table では、データソースとして Google Spreadsheets を利用できます。ローカルなデータをデータテーブルとして利用することもできますが、本格的なアプリケーションを構築するのなら、Google Spreadsheets を利用することになるでしょう。

Google Visualization Table でデータソースとして Google Spreadsheets を利用する場合には、クエリを発行して、そのレスポンスからデータテーブルを取得します。ここでは、クエリを発行する際に取得するデータ数を制限しておき、必要に応じてクエリを再発行して次のデータを取得する方法を紹介します。

この方法は、該当するデータの量が膨大な場合だが、表示することになるデータが少ない場合に有効です。該当するデータの多くを表示する可能性が高い場合には、ローカル側で該当するデータをすべて保持する「Google Visualization Query Table の標準ページ処理の例」で示す方法の方がよいでしょう

ソースコード

function init(){
	var dataSource="https://spreadsheets.google.com/ccc?key=0AvtCwTeZPCemdFpTWGUxSW9lcVNEeEYyeE9aM3B3RGc&hl=ja" ;
	var container=document.getElementById('res');
	var pageSize=5;
	var t1=new queryTable(dataSource,container,pageSize);
	t1.send();
}

function queryTable(dataSource,container,pageSize){
	this.options={
	 page:"event",
	 pageSize:pageSize,
	 startPage:0,
	 pagingButtonsConfiguration:'both',
	 showRowNumber:true,
	 firstRowNumber:1,
	 sort:'disable'
	};
	this.sourcePage=0;
	this.limit=pageSize+1;
	this.offset=this.sourcePage * pageSize;
	this.statement='select * order by A desc limit '+ this.limit+ ' offset ';
	this.statements=this.statement + this.offset;
	this.dataSource=dataSource;
	this.container=container;
	this.query= new google.visualization.Query(dataSource);
	this.table= new google.visualization.Table(container);
	this.dataTable={};
	var self = this;
	google.visualization.events.addListener(self.table, 'page', function(e) {self.handlePage(e)});
}

queryTable.prototype.send=function(){
		var self = this;
		self.query.setQuery(self.statements);
		self.query.send(function(response) {self.handleResponse(response)});
}

queryTable.prototype.handleResponse=function(response){
		var self = this;	
		self.dataTable={};
		if(response.isError()) {
			self.container.innerHTML=response.getDetailedMessage();
			return;
		}
		self.dataTable = response.getDataTable();
		self.table.draw(this.dataTable,this.options);
}

queryTable.prototype.handlePage=function(e){
		alert(e['page']);
		var self = this;
		var indexPage=self.sourcePage + e['page'];
		if(indexPage<0)return false;
		if (e['page']==1 && self.dataTable.getNumberOfRows() <= self.pageSize)return false;
		self.sourcePage=indexPage;
		self.statements=self.statement+ (self.sourcePage * self.options.pageSize);
		self.options['firstRowNumber']=(self.sourcePage * self.options.pageSize) +1;
		self.send();
}

google.load('visualization', '1', {'packages':['table']});
google.setOnLoadCallback(init);	

page イベントを処理することを示すため、あえて イベントオブジェクトの page プロパティの値をアラート表示させています。

別の記述例

ラッパを使わずにグローバルオブジェクトを活用している別のソースコードのページは、「Google Visualization Query Table のページイベントの処理の例」です。そちらの方がコードは理解しやすいと思います。

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

クエリであらかじめ件数を制限することなく、ローカル側でページ処理する方法です。

参考