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.

• Add new comment

• Uncategorized