Pagination with Flex 2 (tilelist example)
So I you want to paginate a tilelist? Piece of cake.
The best way to accomplish this is with an ArrayCollection as a dataprovider. But we won't actually use it as a dataprovider, instead we'll use a dummy arrayCollection as the dataprovider which will only be populated with the current page. So let's set up some variables.
[Bindable]
private var myDataProvider:ArrayCollection;
private var pagedDataProvider:ArrayCollection;
[Bindable]
private var curPage:int=1;
[Bindable]
private var pageCount:int=0;
private static PERPAGE:int=8;
Now let's assume your myDataProvider variable is populated by about 30 objects. You only want to see 8 at a time. So let's set a static, PERPAGE as the number of items per page. The other vars are obvious here except pagedDataProvider which is going to be used to store the current dataset.
Let's setup an init function to get our first page of results and set everything up.
public function init():void{
pagedDataProvider=new ArrayCollection();
pageCount=(myDataProvider.length/PERPAGE)+1;
curPage=1;
if(pageCount > 1){
btnNext.enabled=true;
}
if(myDataProvider.length >= PERPAGE){
for(var i:int=0;i<PERPAGE;i++){
pagedDataProvider.addItem(myDataProvider.getItemAt(i));
}
}else{
pagedDataProvider=myDataProvider;
}
}
now assume that btnNext and btnPrevious are buttons to control the paging. This function will set up pagedDataProvider nicely. Let's go ahead and tie it to an component, in this case a tilelist.
<mx:TileList rowHeight="108" columnWidth="108" left="3" columnCount="4" id="tilelistPagedExample" rowCount="2" dataProvider="{pagedDataProvider}">
<mx:itemRenderer>
<mx:Component>
<mx:Image width="100" height="100" source="{data.thumbnail}" toolTip="{data.caption}" />
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
All we have left is the forward and back functions. These functions will repopulate the pagedDataProvider with the next pages worth of stuff.
private function getNextPage():void{
var start:int=PERPAGE*curPage;//for example, click from page 1, start would then be 8*1=8. start at index 8.
var end:int=0;
//do we have enough items in this set?
if((myDataProvider.length-start)>PERPAGE){
end=start+PERPAGE;//count it
}else{
end=myDataProvider.length;
}
pagedDataProvider=new ArrayCollection();
for(var i:int=start;i<end;i++){
pagedDataProvider.addItem(myDataProvider.getItemAt(i));
}
curPage++;//incriment the page!
btnPrevious.enabled=true;
if(curPage==pageCount){
btnNext.enabled=false;
}
}
Pretty self explanatory. Calculate the start and end, loop through adding those items. Now the previous button function.
private function getPreviousPage():void{
curPage--;//decriment the page!
btnNext.enabled=true;
if(curPage==1){
btnPrevious.enabled=false;
}
var start:int=PERPAGE*(curPage-1);//for example, click from page 1, start would then be 8*1=8. start at index 8.
var end:int=start+PERPAGE;//count it
pagedDataProvider=new ArrayCollection();
for(var i:int=start;i<end;i++){
pagedDataProvider.addItem(myDataProvider.getItemAt(i));
}
}
That last function is pretty simple since we can assume a lot of things based on the fact that we're going back. We don't need to worry about checking if end is greater than the overall length because if we're going backwards, we know it already got that far!
Pretty simple eh? Don't forget to add the btnNext and btnPrevious controls and to run init after you've populated your dataprovider. I'll publish an example of this code in action later.

7 Comments:
Is it possible to do it with an XML data received from a server ?
I don't see why not. Are you having trouble doing that?
Did you have a chance to have sample running.
Thank you for your help
nice real nifty, I can see how I can use this for pagination with Flash CS3, will post code here once done
http://oroede.org
is it possible to do this with an array of buttons on a canvas and paginating loads your other buttons? very coolhypi
could you plese send me source code of this example ?
Thanks,
srinivas
Hi
plese send the source code of this next priveous example.
srinu.in@gmail.com
thanks
srinivas
Post a Comment
<< Home