Datagrid Pagenation

<?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:ToggleButtonBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" width="{dg.width}" /> 
  </mx:VBox>
  </mx:Application>

~ by mjcprasad2000 on January 16, 2009.