app:pagination
  • Required Attributes (0)
  • Optional Attributes (15)
  • Examples (1)
  • Source code
Name Type Description Default value
There are no required attributes
Back to menuExample: Simple Example

This is a simple example that uses the <app:pagination>.

#{date} #{home} #{homescore} #{away} #{awayscore} #{timeleft}
var start = 1; var end = 4; var total = 12; var rows = new Array(); for (var i=start-1;i<=end-1;i++) { rows.push (PaginationExample.rows[i]); } var result = {'end':end,'start':start,'total':total,'rows':rows}; $MQ('l:paginationexample.response',result); var start = 0; var end = 0; if (this.data.dir == 'next') { start = parseInt(this.data.end) + 1; end = parseInt(this.data.end) + 4; } else { start = parseInt(this.data.start) - 4; end = parseInt(this.data.end) - 4; } var dir = this.data.dir; var total = 12; var rows = new Array(); for (var i=start-1;i<=end-1;i++) { rows.push (PaginationExample.rows[i]); } var result = {'end':end,'start':start,'total':total,'rows':rows}; $MQ('l:paginationexample.response',result);
<app:pagination id="example_pagination" request="l:paginationexample.request" response="l:paginationexample.response"
	resultsString="#{start}-#{end}" totalsString="of #{total} scores" nextText="next"
	prevText="prev" showTotals="true" startProperty="start" endProperty="end" totalProperty="total">
</app:pagination>
<div class="scorecontainer">
	<app:iterator on="l:paginationexample.response then execute" property="rows" >
		<html:div class="scoreentry">
			<html:table width="100%">
				<html:tr class="scoretitle"><html:td>#{date} </html:td></html:tr>
				<html:tr><html:td class="home">#{home} #{homescore}</html:td></html:tr>
				<html:tr><html:td class="away">#{away} #{awayscore}</html:td></html:tr>
			</html:table>
			<html:div class="scoretime">#{timeleft}</html:div>
		</html:div>
	</app:iterator>
</div>
<app:script>
	var start = 1;
	var end = 4;
	var total = 12;
	var rows = new Array();
	for (var i=start-1;i&amp;amp;lt;=end-1;i++)
	{
		rows.push (PaginationExample.rows[i]);
	}
	var result = {'end':end,'start':start,'total':total,'rows':rows};
	$MQ('l:paginationexample.response',result);
</app:script>
<app:script on="l:paginationexample.request then execute">
	var start = 0;
	var end = 0;
	if (this.data.dir == 'next')
	{
		start = parseInt(this.data.end) + 1;
		end = parseInt(this.data.end) + 4;
	}
	else
	{
		start = parseInt(this.data.start) - 4;
		end = parseInt(this.data.end) - 4;
	}
	var dir = this.data.dir;
	var total = 12;
	var rows = new Array();
	for (var i=start-1;i&amp;amp;lt;=end-1;i++)
	{
		rows.push (PaginationExample.rows[i]);
	}
	var result = {'end':end,'start':start,'total':total,'rows':rows};
	$MQ('l:paginationexample.response',result);
</app:script>

<script>
	var PaginationExample = Class.create();
	PaginationExample.rows = new Array();
	function addScore(array,home,away,homescore,awayscore,date,timeleft)
	{
		array.push({'home':home,'away':away,'homescore':homescore,'awayscore':awayscore,'date':date,'timeleft':timeleft})
	}
	addScore(PaginationExample.rows,"(16) Hawaii","Nevada","","","Fri 11/16","");
	addScore(PaginationExample.rows,"(2) Oregon","Arizona",24,34,"Thu 11/15","Final");
	addScore(PaginationExample.rows,"(1) LSU","Mississippi","","","Sat 11/17","");
	addScore(PaginationExample.rows,"(3) Kansas","Iowa St","","","Sat 11/17","");
	addScore(PaginationExample.rows,"(4) Oklahoma","Texas Tech","","","Sat 11/17","");
	addScore(PaginationExample.rows,"(5) Missouri","Kansas St","","","Sat 11/17","");
	addScore(PaginationExample.rows,"(6) West Virgina","(22) Cincinatti","","","Sat 11/17","");
	addScore(PaginationExample.rows,"(7) Ohio St","(21) Michigan","","","Sat 11/17","");
	addScore(PaginationExample.rows,"(23) Kentucky","(9) Georgia","","","Sat 11/17","");
	addScore(PaginationExample.rows,"Miami (FL)","(10) Virginia Tech","","","Sat 11/17","");
	addScore(PaginationExample.rows,"Florida Atlantic","(12) Florida","","","Sat 11/17","");
	addScore(PaginationExample.rows,"(17) Boston College","(15) Clemson","","","Sat 11/17","");
</script>
  1 /*
  2  * This file is part of Appcelerator.
  3  *
  4  * Copyright (C) 2006-2008 by Appcelerator, Inc. All Rights Reserved.
  5  * For more information, please visit http://www.appcelerator.org
  6  *
  7  * Appcelerator is free software: you can redistribute it and/or modify
  8  * it under the terms of the GNU General Public License as published by
  9  * the Free Software Foundation, either version 3 of the License, or
 10  * (at your option) any later version.
 11  *
 12  * This program is distributed in the hope that it will be useful,
 13  * but WITHOUT ANY WARRANTY; without even the implied warranty of
 14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 15  * GNU General Public License for more details.
 16  * 
 17  * You should have received a copy of the GNU General Public License
 18  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 19  *
 20  */
 21 
 22 Appcelerator.Widget.Pagination =
 23 {
 24 	getName: function()
 25 	{
 26 		return 'appcelerator pagination';
 27 	},
 28 	getDescription: function()
 29 	{
 30 		return 'pagination widget';
 31 	},
 32 	getVersion: function()
 33 	{
 34 		return '1.0.1';
 35 	},
 36 	getSpecVersion: function()
 37 	{
 38 		return 1.0;
 39 	},
 40 	getAuthor: function()
 41 	{
 42 		return 'Nolan Wright';
 43 	},
 44 	getModuleURL: function ()
 45 	{
 46 		return 'http://www.appcelerator.org';
 47 	},
 48 	isWidget: function ()
 49 	{
 50 		return true;
 51 	},
 52 	getWidgetName: function()
 53 	{
 54 		return 'app:pagination';
 55 	},
 56 	getAttributes: function()
 57 	{
 58 		var T = Appcelerator.Types;        
 59         return [{
 60             name: 'request',
 61             optional: true,
 62             type: T.messageSend
 63         }, {
 64             name: 'response',
 65             optional: true,
 66             type: T.messageReceive
 67         }, {
 68             name: 'startProperty',
 69             optional: true,
 70             defaultValue: 'start',
 71 			type: T.identifier,
 72 			description: 'Property on the response message that contains the index of the first item returned'
 73         }, {
 74             name: 'endProperty',
 75             optional: true,
 76             defaultValue: 'end',
 77 			type: T.identifier,
 78 			description: 'Property on the response message that contains the index of the last item returned'
 79         }, {
 80             name: 'totalProperty',
 81             optional: true,
 82             defaultValue: 'total',
 83             description: 'Property on the response message that contains the total number of items found'
 84         }, {
 85             name: 'nextText',
 86             optional: true,
 87             defaultValue: 'next',
 88 			description: 'Text to show on the "Next Page" button, '+
 89 			'in the absense of a localized string given by nextLangId'
 90         }, {
 91             name: 'prevText',
 92             optional: true,
 93             defaultValue: 'prev',
 94 			description: 'Text to show on the "Previous Page" button, '+
 95             'in the absense of a localized string given by prevLangId'
 96         }, {
 97             name: 'nextLangId',
 98             optional: true,
 99 			type: T.langId
100         }, {
101             name: 'prevLangId',
102             optional: true,
103 			type: T.langId
104         }, {
105             name: 'resultsString',
106             optional: true,
107             defaultValue: 'Showing #{start} of #{end}'
108         }, {
109             name: 'totalsString',
110             optional: true,
111             defaultValue: '#{total} records found'
112         }, {
113             name: 'resultsLangId',
114             optional: true,
115 			type: T.langId
116         }, {
117             name: 'totalsLangId',
118             optional: true,
119 			type: T.langId
120         }, {
121             name: 'fieldset',
122             optional: true,
123             description: "Fieldset to be associated with the iterator for filtering"
124         }, {
125             name: 'showTotals',
126             optional: true,
127 			type: T.bool
128         }];
129 	},
130 	ignoreFieldset: function()
131 	{
132 	    return true;
133 	},	
134 	compileWidget: function(parameters)
135 	{
136 		var request = parameters['request'];
137 		var message = parameters['response'];
138 		var startProperty = parameters['startProperty'];
139 		var endProperty = parameters['endProperty'];
140 		var totalProperty = parameters['totalProperty'];
141 		var nextLangId = parameters['nextLangId'];
142 		var prevLangId = parameters['prevLangId'];
143 		var resultsString = parameters['resultsString'];
144 		var totalsString = parameters['totalsString'];
145 		var resultsLangId = parameters['resultsLangId'];
146 		var totalsLangId = parameters['totalsLangId'];
147 		var showTotals = parameters['showTotals'] == 'true';
148 		var id = parameters['id'];
149 		
150 		$MQL(message,
151 	    function(t, data, datatype, direction)
152 		{
153 			// Oh, Nolan is so clever!
154 			Element[ (data[startProperty]>1) ? 'show' : 'hide' ]('app_prev_'+id);
155 			Element[ (data[totalProperty]>data[endProperty]) ? 'show' : 'hide' ]('app_next_'+id);
156 			Element[ (data[startProperty]>1 && data[endProperty]<data[totalProperty]) ? 'show' : 'hide' ]('app_sep_'+id);
157 			var nextAnchor = $('app_next_'+id);
158 			var prevAnchor = $('app_prev_'+id);
159 			Appcelerator.Compiler.destroy(nextAnchor);
160 			Appcelerator.Compiler.destroy(prevAnchor);
161 			var total = data[totalProperty];
162 			var end = data[endProperty];
163 			var start = data[startProperty];
164 			
165             $(id + "_start").value = start;
166             $(id + "_end").value = end;
167             
168 			if (resultsLangId)
169 			{
170 				var compiled = Appcelerator.Localization.getWithFormat(resultsLangId,resultsString,null,data);
171 				$('app_pagination_showing_'+id).innerHTML = compiled;
172 			}
173 			else
174 			{
175 				var resultsTemplate = Appcelerator.Compiler.compileTemplate(resultsString,true,'app_results_'+id);
176 				var compiled = eval(resultsTemplate + '; app_results_' + id + ';');
177 				$('app_pagination_showing_'+id).innerHTML = compiled(data);
178 			}
179 			
180 			if (showTotals)
181 			{
182 				if (totalsLangId)
183 				{
184 					var compiledTotals = Appcelerator.Localization.getWithFormat(totalsLangId,totalsString,null,data);
185 					$('app_pagination_totals_'+id).innerHTML = compiledTotals;
186 				}
187 				else
188 				{
189 					var totalsTemplate = Appcelerator.Compiler.compileTemplate(totalsString,true,'app_totals_'+id);
190 					var compiledTotals = eval(totalsTemplate + '; app_totals_' + id + ';');
191 					$('app_pagination_totals_'+id).innerHTML = compiledTotals(data);
192 				}
193 			}
194 			
195 			nextAnchor.setAttribute('on','click then '+request+'[dir=next]');
196             prevAnchor.setAttribute('on','click then '+request+'[dir=previous]');
197 			Appcelerator.Compiler.dynamicCompile(nextAnchor);
198 			Appcelerator.Compiler.dynamicCompile(prevAnchor);
199 		}); // TODO: what should scope be?
200 	},
201 	buildWidget: function(element,parameters)
202 	{
203 		var request = parameters['request'];
204 		var response = parameters['response'];
205 		var startProperty = parameters['startProperty'];
206 		var endProperty = parameters['endProperty'];
207 		var totalProperty = parameters['totalProperty'];
208 		var nextText = parameters['nextText'];
209 		var prevText = parameters['prevText'];
210 		var nextLangId = parameters['nextLangId'];
211 		var prevLangId = parameters['prevLangId'];
212 		var resultsString = parameters['resultsString'];
213 		var totalsString = parameters['totalsString'];
214 		var resultsLangId = parameters['resultsLangId'];
215 		var totalsLangId = parameters['totalsLangId'];
216 		var showTotals = parameters['showTotals'];
217         var fieldset = parameters['fieldset'];
218 		var id = parameters['id'];
219         
220         //Assign a default fieldset of the element's ID
221         if(typeof fieldset == "undefined")
222         {
223             fieldset = element.id;
224         }	
225         			
226 		// build html
227 		var html = '<span style="display:none" on="'+response+'['+totalProperty+'!=0] then show else hide">';
228 		html += '<span id="app_pagination_showing_'+id + '"></span>';
229         
230         html += '<a style="padding-left:5px" id="app_prev_'+id +'"' + ' fieldset="' + fieldset + '">';
231 
232         html += (prevLangId) ? Appcelerator.Localization.get(prevLangId) : prevText;
233         html += "</a>";
234         
235 		html += '<span style="padding-left:3px;padding-right:3px" id="app_sep_'+id+'">|</span>';
236 
237 		html += '<a style="padding-left:3px" id="app_next_'+id+'"' + ' fieldset="' + fieldset + '">';
238 
239         html += (nextLangId) ? Appcelerator.Localization.get(nextLangId) : nextText;
240         html += "</a>";
241         
242 		html += '<span style="padding-left:10px" id="app_pagination_totals_'+id+'"></span>';
243 		html += '</span>';
244 		html += '<input id="' + element.id + '_start" type="hidden" name="start" fieldset="' + fieldset + '" />';
245 		html += '<input id="' + element.id + '_end" type="hidden" name="end" fieldset="' + fieldset + '" />';
246         
247 		return {
248 			'presentation' : html,
249 			'position' : Appcelerator.Compiler.POSITION_REPLACE,
250 			'compile' : true,
251 			'wire' : true
252 		};
253 	}
254 };
255 
256 
257 Appcelerator.Widget.register('app:pagination',Appcelerator.Widget.Pagination);
258