app:pagination
| Widget Name | appcelerator pagination |
| Element | <app:pagination> |
| Author | Nolan Wright |
| Homepage | http://www.appcelerator.org |
| Description | pagination widget |
- Required Attributes (0)
- Optional Attributes (15)
- Examples (1)
- Source code
| Name | Type | Description | Default value |
|---|---|---|---|
| There are no required attributes | |||
| Name | Type | Description | Default value |
|---|---|---|---|
| request | Appcelerator Message Send | Not specified | Not specified |
| response | Appcelerator Message Reception | Not specified | Not specified |
| startProperty | Identifier | Property on the response message that contains the index of the first item returned | start |
| endProperty | Identifier | Property on the response message that contains the index of the last item returned | end |
| totalProperty | Unknown | Property on the response message that contains the total number of items found | total |
| nextText | Unknown | Text to show on the "Next Page" button, in the absense of a localized string given by nextLangId | next |
| prevText | Unknown | Text to show on the "Previous Page" button, in the absense of a localized string given by prevLangId | prev |
| nextLangId | Unknown | Not specified | Not specified |
| prevLangId | Unknown | Not specified | Not specified |
| resultsString | Unknown | Not specified | Showing #{start} of #{end} |
| totalsString | Unknown | Not specified | #{total} records found |
| resultsLangId | Unknown | Not specified | Not specified |
| totalsLangId | Unknown | Not specified | Not specified |
| fieldset | Unknown | Fieldset to be associated with the iterator for filtering | Not specified |
| showTotals | Boolean | Not specified | Not specified |
Back to menuExample: Simple Example
#{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);
This is a simple example that uses the <app:pagination>.
<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;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;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
Chapters
- Web Expressions (Interaction)
- Web Expressions (Visual)
- Web Expression Macros
-
Widget Reference
- app:as_flexflow
- app:box
- app:button
- app:calendar
- app:chart
- app:content
- app:datacache
- app:datatable
- app:download
- app:editinplace
- app:ext_grid
- app:ext_paging_grid
- app:ext_tree
- app:field
- app:folder
- app:graphical_music_player
- app:http
- app:if
- app:imagetransition
- app:iterator
- app:message
- app:modalbox
- app:modaldialog
- app:mp3player
- app:music_player
- » app:pagination
- app:panel
- app:progressbar
- app:script
- app:search
- app:security
- app:shadowbox
- app:simple_panel
- app:statemachine
- app:stopwatch
- app:tabpanel
- app:template
- app:tooltip
- app:upload
- app:validation
- app:widget
- app:yui_map
- CSS Helper Classes
- Advanced Configuration
- Debugging
- Forms
- Localization
- Interpolation
- Javascript Variables
- Javascript Functions
- Service Broker