Main.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:file="file.*"> <mx:Script> <!--[CDATA[ import simPager.PagerEvent; import mx.collections.ArrayCollection; [Bindable] private var arr:ArrayCollection = new ArrayCollection([ {A:1, B:20, selected:false, label:"one"}, {A:2, B:20, selected:false, label:"two"}, {A:3, B:20, selected:true, label:"three"}, {A:4, B:20, selected:true, label:"four"}, {A:5, B:20, selected:true, label:"five"}, {A:6, B:20, selected:true, label:"six"}, {A:7, B:20, selected:true, label:"seven"}, {A:8, B:20, selected:true, label:"eight"}, {A:9, B:20, selected:true, label:"nine"}, {A:10, B:20, selected:true, label:"ten"}, {A:11, B:20, selected:true, label:"Hello"}, {A:12, B:20, selected:true, label:"Hello"}, {A:13, B:20, selected:true, label:"Hello"}, {A:14, B:20, selected:true, label:"Hello"}, {A:15, B:20, selected:true, label:"Hello"}, {A:16, B:20, selected:false, label:"Hello"}, {A:17, B:20, selected:false, label:"Hello"}, {A:18, B:20, selected:true, label:"seven"}, {A:19, B:20, selected:true, label:"eight"}, {A:20, B:20, selected:true, label:"nine"}, {A:21, B:20, selected:true, label:"ten"}, {A:22, B:20, selected:true, label:"Hello"}, {A:23, B:20, selected:true, label:"Hello"}, {A:24, B:20, selected:true, label:"Hello"}, {A:25, B:20, selected:true, label:"Hello"}, {A:26, B:20, selected:true, label:"Hello"}, {A:27, B:20, selected:false, label:"Hello"}, {A:28, B:20, selected:false, label:"Hello"} ]); private function initData():void{ this.pbar.dataGrid=dg2; this.pbar.orgData=arr; this.pbar.dataBind(); } ]]--> </mx:Script> <mx:Panel width="704" height="296" layout="absolute"> <mx:DataGrid id="dg2" x="10" y="10" width="432" height="200" creationComplete="initData()"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="A"/> <mx:DataGridColumn headerText="Column 2" dataField="B"/> <mx:DataGridColumn headerText="Column 3" dataField="label"/> </mx:columns> </mx:DataGrid> <file:PagingBar id="pbar" x="10" y="218" width="674"> </file:PagingBar> </mx:Panel> </mx:Application> PagingBar.mxml(修改了网上的帖子) <?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" fontSize="12" paddingTop="2"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.events.ItemClickEvent; import flash.events.KeyboardEvent; import mx.controls.DataGrid; import mx.validators.NumberValidator; [Bindable] [Embed(source='images/first.png')] private var firstIcon:Class; private var firstPage:uint; [Bindable] [Embed(source='images/previous.png')] private var preIcon:Class; private var prePage:uint; [Bindable] [Embed(source='images/next.png')] private var nextIcon:Class; private var nextPage:uint; [Bindable] [Embed(source='images/last.png')] private var lastIcon:Class; private var lastPage:uint; //页码条数据,绑定 [Bindable] private var nav:ArrayCollection = new ArrayCollection(); //默认起始页码,第1页 private var currentPageIndex:uint = 0; //是否已初始化 private var isInit:Boolean=true; //总页数 private var totalPages:uint = 0; //是否重绘页码条,当使用服务端分页时使用 private var isCreateNavBar:Boolean = true; /************************************************************/ //显示到Grid的数据 [Bindable] public var viewData:ArrayCollection=null; //所有的数据 public var orgData:ArrayCollection=null; //每页记录数下拉框 public var pageSizeDropDownListData:ArrayCollection=null; // 每页记录数 public var pageSize:uint = 10; // 页码条上显示页码的个数 public var navSize:uint = 3; //记录总数,调用服务端发页时使用 public var totalRecord:int=0; //分页函数 public var pagingFunction:Function=null; //分页条对应的Grid public var dataGrid:DataGrid=null; /***************************************************************/ public function dataBind(isServerSide:Boolean=false):void{ //是否初始化 if(isInit){ if(pageSizeDropDownListData==null){ pageSizeDropDownListData = new ArrayCollection(); pageSizeDropDownListData.addItem({label:5,data:5}); pageSizeDropDownListData.addItem({label:10,data:10}); pageSizeDropDownListData.addItem({label:20,data:20}); pageSizeDropDownListData.addItem({label:30,data:30}); } pageSizeComobox.dataProvider=pageSizeDropDownListData; pageSizeComobox.selectedIndex=1; isInit=false; } // refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide); } /** * 构建页码条 * pages:总页数 * pageIndex:当前页(注意,从0开始) * */ private function createNavBar(pageIndex:uint = 0):void{ nav.removeAll(); //向前图标操作,first,Pre if( pageIndex > 1 ){ firstPage=0; firstNavBtn.visible=true; var intLFive:int = pageIndex-navSize; // calculate start of last 5; // prePage=intLFive; preNavBtn.visible=true; } else{ firstNavBtn.visible=false; preNavBtn.visible=false; } //页码条 for( var x:uint = 0; x < navSize; x++){ var pg:uint = x + pageIndex; nav.addItem({label: pg + 1,data: pg}); // var pgg:uint = pg+1; if(pgg>=totalPages){ //搜索到最后一个页码,停止添加到navbar x=navSize; } } //计算最后一组页码条中第一个页码的页码编号 var lastpage:Number = 0; for( var y:uint = navSize; y <= totalPages-1;y = y + navSize ){ //lets calculate the lastpage button if(y+5 > navSize){ lastpage = y; } } //向后图标 if( pg < totalPages - 1 ){ nextPage=pg + 1; nextNavBtn.visible=true; lastPage=lastpage; lastNavBtn.visible=true; } else{ nextNavBtn.visible=false; lastNavBtn.visible=false; } } /** * 页码按钮按下(页码条点击) */ private function navigatePage(event:ItemClickEvent):void { refreshDataProvider(event.item.data,false); } /** * 页码按钮按下,first,pre,next,last */ private function navigateButtonClick(pageString:String):void{ var pageIndex:uint=0; switch(pageString){ case "firstPage": pageIndex=firstPage; break; case "prePage": pageIndex=prePage; break; case "nextPage": pageIndex=nextPage; break; default: //lastPage pageIndex=lastPage; } // refreshDataProvider(pageIndex); } /** * 更新数据源,更新表格显示数据 */ private function refreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,pageSize:uint=0,resultReturn:Boolean=false):void{ //分页函数 if(dataGrid==null) return; currentPageIndex=pageIndex; if(pageSize==0){ pageSize=this.pageSize; }else{ this.pageSize=pageSize; if(!resultReturn) totalPages = Math.ceil(orgData.length/pageSize); } if(!resultReturn){ if(this.pagingFunction!=null){ pagingFunction(pageIndex,pageSize); this.isCreateNavBar=isCreateNavBar; } else{ viewData = new ArrayCollection( orgData.source.slice((pageIndex * pageSize),(pageIndex * pageSize) + pageSize) ); dataGrid.dataProvider=viewData; pageNumber.text=(pageIndex+1).toString(); totalRecordLabel.text = '总记录数:' + orgData.length.toString(); } } else{ dataGrid.dataProvider=orgData; totalPages = Math.ceil(totalRecord/pageSize); pageNumber.text=(pageIndex+1).toString(); totalRecordLabel.text = '总记录数:' + totalRecord.toString() } totalPagesLabel.text = '总页数:' + totalPages; if(isCreateNavBar) createNavBar(pageIndex); } // /** * 每页记录数变更(下拉框选择) */ private function pageSizeSelectChange():void{ refreshDataProvider(0,true,uint(pageSizeComobox.value)); } /** * 页码变更(直接输入) */ private function pageIndexInsertChange(event:Event):void{ var keyboardEvent:KeyboardEvent=event as KeyboardEvent; if(keyboardEvent!=null&&keyboardEvent.keyCode== Keyboard.ENTER){ var pageIndex:uint=uint(pageNumber.text)-1; if(pageIndex>0&&pageIndex<totalPages&&pageIndex!=currentPageIndex){ refreshDataProvider(pageIndex); } else{ pageNumber.text = (currentPageIndex+1).toString(); } } } /** * 查看所有 */ /* private function viewAll():void{ var tempTotalRecord:uint=0; if(pagingFunction!=null) tempTotalRecord=totalRecord; else tempTotalRecord=orgData.length; // pageSizeComobox.text=tempTotalRecord.toString(); pageSizeComobox.selectedIndex=-1; refreshDataProvider(0,true,tempTotalRecord); } */ ]]--> </mx:Script> <mx:Label paddingTop="3" id="totalPagesLabel" text="" color="#FA1F02"/> <mx:Label paddingTop="3" id="totalRecordLabel" text="" color="#FA0213"/> <mx:Button id="firstNavBtn" icon="{firstIcon}" width="20" height="20" click="navigateButtonClick('firstPage');" /> <mx:Button id="preNavBtn" icon="{preIcon}" width="20" height="20" click="navigateButtonClick('prePage');"/> <mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" height="26"/> <mx:Button id="nextNavBtn" icon="{nextIcon}" width="20" height="20" click="navigateButtonClick('nextPage');"/> <mx:Button id="lastNavBtn" icon="{lastIcon}" width="20" height="20" click="navigateButtonClick('lastPage');"/> <mx:Label paddingTop="3" text="每页记录:"/> <mx:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" arrowButtonWidth="10" change="pageSizeSelectChange()"/> <mx:Label paddingTop="3" text="页码:"/> <mx:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);"/> <!--<mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/>--> </mx:HBox>