Plugin to add pagination in a Flex Datagrid?

Question

Is there a library or plugin that could be added to a Flex project to add pagination to a Flex Datagrid?

Answer 1

The source code for this paginated datagrid can be found here.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="InitApp()" xmlns:MyComp="*">
<mx:Script>
    <![CDATA[
     import mx.collections.ArrayCollection;
     import mx.events.ItemClickEvent; 
     import mx.controls.Button;
     import mx.controls.Alert;

     [Bindable]
     public var myData:ArrayCollection = new ArrayCollection();
     public var orgData:ArrayCollection = new ArrayCollection();
     [Bindable]
     public var nav:ArrayCollection = new ArrayCollection();
     public var pageSize:uint = 10;
     public var navSize:uint = 10;
     private var index:uint = 0;
     private var navPage:uint = 1;

     private function InitApp():void
     {
      for( var x:uint = 1; x <= 500; x++ )
      {
       var obj:Object = new Object();
       obj.Id = x.toString();
       obj.Name = "Column " + x.toString();
       obj.Street = "5555 Street";
       obj.Title = "CEO";
       obj.City = "El Paso";

       orgData.addItem(obj);
      }
      refreshDataProvider(index);
      createNavBar(Math.ceil(orgData.length/pageSize));
     }

     private function createNavBar(pages:uint = 1,set:uint = 0):void
     {
      nav.removeAll();
      if( pages > 1 )
      {
       if( set != 0 )
       {
        nav.addItem({label:"<<",data:0});
        if( (set - navSize ) >= 0 )
        {
         nav.addItem({label:"<",data:set - navSize});
        }
        else
        {
         nav.addItem({label:"<",data:0});
        }
       }

       for( var x:uint = 0; x < navSize; x++)
       {
        var pg:uint = x + set;
        nav.addItem({label: pg + 1,data: pg});
       }
       if( pg < pages - 1 )
       {
        nav.addItem({label:">",data:pg + 1});
        nav.addItem({label:">>",data:pages - pageSize});
       }
      }
     }

     private function navigatePage(event:ItemClickEvent):void
     {
      refreshDataProvider(event.item.data);
      var lb:String = event.item.label.toString();
      if( lb.indexOf("<") > -1 || lb.indexOf(">") > -1 )
      {
       createNavBar(Math.ceil(orgData.length/pageSize),event.item.data);
       if( event.item.data == 0 )
       {
        pageNav.selectedIndex = 0;
       }
       else
       {
        pageNav.selectedIndex = 2;
       }
      }

     }

     private function refreshDataProvider(start:uint):void
     {
      myData = new ArrayCollection( orgData.source.slice((start * pageSize),(start * pageSize) + pageSize) );
     }
    ]]>
</mx:Script>
<mx:VBox verticalGap="0">
    <mx:DataGrid id="dg" dataProvider="{myData}"></mx:DataGrid>
    <mx:ToggleButtonBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" width="{dg.width}"></mx:ToggleButtonBar>
</mx:VBox>

</mx:Application>

Answer 2

Stop spamming Flexicious

Answer 3

http://cookbooks.adobe.com/post_Pagination_in_Flex-9263.html