Flex中使用datagrid的分页技术

转自：http://hi.baidu.com/nirvana140107/blog/item/8d8222008e17c80f1d958322.html

 

关于分页技术可以说最常用的技术：

在java的经典的分页技术中必须的参数有四个无论哪个分页技术都是必须的：

当前页数：pageNow

页面记录的数：pageSize

页面总记录数：totalResults

分页数据信息：Collection （当前页面显示的集合数据是总数据的一部分）

 

各种关系：

有四舍五入的数学算法可以知道任何一个浮点数加上0.5 取其整数部分可以得到他的四舍五入的数据：

同理如下

 

总的页面数量： pageTotal=（totalResults+pageSize-1）/pageSize;

当前的页面开始记录： startResult=（pageNow-1）*pageSize；

当前的页面结束记录： endResult=pageNow*pageSize；

 

开始记录和结束记录查询分页显示当前数据，页面总数数据库查询

 

Y(^o^)Y，开始分析C/S分页技术

大前提必须记住哦，O(∩_∩)O哈哈哈~

数据量不是很大的时候采用，但数据量相当大的时候最好采用Java经典分页技术，提高客户的相应效率。

 

由以上参数可以计算的信息如下：

在CS开发中常用分页中使用分页技术：

当前页数：pageNow

页面记录的数：pageSize

总的数据信息：Collection （总数据）

 

总的记录数：totalResults 从总数据量中得到即可

总的页面数量： pageTotal=（totalResults+pageSize-1）/pageSize;

当前的页面开始记录： startResult=（pageNow-1）*pageSize；

当前的页面结束记录： endResult=pageNow*pageSize；

 

已知当前页面开始记录和结束记录数获取当前页面的显示的数据：（忽略）

 

 

 

Flex的分页代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="middle" horizontalAlign="center"   creationComplete="initApp()">
<mx:Script>
   <![CDATA[
     import mx.controls.Alert;
      //每页的记录数
    public var pageSize:uint=8;
    //总的页数
    public var totalPages:uint=0;
    //总的记录数量
    public var totalRows:uint=0;
    //当前页的记录数
    public var pageNow:uint=1;
    //开始记录的行
    public var pageStartRow:uint=1;
    //结束记录的行
    public var pageEndRow:uint=1;
   
      //用于初始化的方法
    public function initApp():void
    {
     txt.text="Page "+pageNow;
     //计算总的记录数
     totalRows=initDG.length;
     
     if(initDG.length>pageSize)
     {
         //从总的记录中获取部分记录的方法同时并切换数据的

        dg.dataProvider=initDG.slice(0,pageSize);


        pPage.enabled=false;
     }
     //记录总的记录数量
     totalPages=Math.floor((totalRows+pageSize-1)/pageSize);
     
     if(totalRows<=pageSize)
     {
        this.pageStartRow=1;
        this.pageEndRow=totalRows;
     }else{
        this.pageStartRow=1;
        this.pageEndRow=pageSize;
     }
     
     if(totalPages==1)
     {
       pPage.enabled=false;
       nPage.enabled=false;
     }
    }
   
     //点击上一页的处理
    public function showPreviousPage():void
    {
      pageNow=pageNow-1;
      txt.text="page "+pageNow;
      if(pageNow != 1)
      {
      pageStartRow=(pageNow-1)*pageSize+1;
        pageEndRow=pageNow*pageSize;
      }else{
      pageEndRow=pageSize;
                 pageStartRow=1;      
        pPage.enabled=false;
      }
      dg.dataProvider=initDG.slice(pageStartRow-1,pageEndRow);
    }
   
     public function showNextPage():void{
         pageNow = pageNow + 1;
         txt.text = "Page " + pageNow;
         if(pageNow == totalPages){
             pageEndRow = totalRows;
             pageStartRow =totalRows-pageSize;
             nPage.enabled = false;
             pPage.enabled = false;
         }else{
         pageStartRow = (pageNow - 1) * pageSize + 1;
             pageEndRow = pageNow * pageSize;
             nPage.enabled = true;
             pPage.enabled = true;
         }
         dg.dataProvider = initDG.slice((pageNow - 1) * pageSize,pageEndRow);
     }
     //首页调用的方法
     public function showFirstPage():void{
         dg.dataProvider = initDG.slice(0,pageSize);
         pPage.enabled = false;
         nPage.enabled = true;
         txt.text = "Page " + 1;
          pageNow = 1;
     }
         //最后一页调用的方法
      public function showLastPage():void{
           dg.dataProvider = initDG.slice((totalPages - 1) * pageSize,totalRows);
           pPage.enabled = true;
           nPage.enabled = false;
           txt.text = "Page " + totalPages;
           pageNow = totalPages;
      }
   ]]>
</mx:Script>

<mx:Panel title="DataGrid分页应用" height="287" width="500">
   <mx:DataGrid id="dg" height="100%" width="100%">
    <mx:dataProvider >
     <mx:Array id="initDG">
                        <mx:Object PLAYER="Rafer Alston" POS="G" FROM="Fresno State"/>
                        <mx:Object PLAYER="Luther Head" POS="G" FROM="lllinois"/>
                        <mx:Object PLAYER="Tracy McGrady" POS="F-G" FROM="Mount Zion Christian Acad. HS (NC)"/>
                        <mx:Object PLAYER="Dikembe Mutombo" POS="C" FROM="Georgetown"/>
                        <mx:Object PLAYER="Stromile Swift" POS="F" FROM="Louisiana State"/>
                        <mx:Object PLAYER="David Wesley" POS="G" FROM="Baylor"/>
                        <mx:Object PLAYER="Yao Ming" POS="C" FROM="China"/>
                        <mx:Object PLAYER="Kobe Bryant" POS="G" FROM="Lower Merion HS (PA)"/>
                        <mx:Object PLAYER="Kwame Brown" POS="F-C" FROM="Glynn Academy HS (GA)"/>
                        <mx:Object PLAYER="Lamar Odom" POS="F" FROM="Rhode Island"/>
                        <mx:Object PLAYER="Andrew Bynum" POS="C" FROM="St. Joseph HS (NJ)"/>
                        <mx:Object PLAYER="Brian Cook" POS="F" FROM="Illinois"/>
                        <mx:Object PLAYER="Devean George" POS="F" FROM="Augsburg"/>
                        <mx:Object PLAYER="Devin Green" POS="G" FROM="Hampton"/>
                        <mx:Object PLAYER="Aaron McKie" POS="F" FROM="Temple"/>
                        <mx:Object PLAYER="Chris Mihm" POS="C" FROM="Texas"/>
                        <mx:Object PLAYER="Smush Parker" POS="G" FROM="Fordham"/>
                        <mx:Object PLAYER="Ronny Turiaf" POS="F" FROM="Gonzaga"/>
                        <mx:Object PLAYER="Sasha Vujacic" POS="F" FROM="Slovenia"/>
                        <mx:Object PLAYER="Von Wafer" POS="F" FROM="Florida State"/>
                        <mx:Object PLAYER="Luke Walton" POS="F" FROM="Arizona"/>
                        <mx:Object PLAYER="Lamar Odom" POS="F" FROM="Rhode Island"/>
                        <mx:Object PLAYER="Jim Jackson" POS="F-G" FROM="Ohio State"/>
                    </mx:Array>
   
    </mx:dataProvider>
      <mx:columns>
      <mx:DataGridColumn headerText="歌 手" dataField="PLAYER" textAlign="center"/>
      <mx:DataGridColumn headerText="方 式" dataField="POS" textAlign="center"/>
      <mx:DataGridColumn headerText="国 家" dataField="FROM" textAlign="center"/>
      </mx:columns>
   </mx:DataGrid>
  
   <mx:Spacer />
   <mx:HBox width="391">
    <mx:Spacer/>
    <mx:LinkBar borderStyle="solid" color="#000000" backgroundColor="#CCFFFF" id="fPage" label="firstPage" itemClick="showFirstPage()">
    <mx:dataProvider>
              <mx:Array>
                  <mx:String>firstPage</mx:String>
              </mx:Array>
          </mx:dataProvider>
   </mx:LinkBar>
   <mx:LinkBar borderStyle="solid" color="#000000" backgroundColor="#CCFFFF" id="pPage" label="prevPage" itemClick="showPreviousPage()">
    <mx:dataProvider>
              <mx:Array>
                  <mx:String>prePage</mx:String>
              </mx:Array>
          </mx:dataProvider>
   </mx:LinkBar>
   <mx:Text id="txt" width="52"/>
   <mx:LinkBar borderStyle="solid" color="#000000" backgroundColor="#CCFFFF" id="nPage" label="nextPage" itemClick="showNextPage()">
    <mx:dataProvider>
              <mx:Array>
                  <mx:String>nextPage</mx:String>
              </mx:Array>
          </mx:dataProvider>
   </mx:LinkBar>
   <mx:LinkBar borderStyle="solid" color="#000000" backgroundColor="#CCFFFF" id="lPage" label="lastPage" itemClick="showLastPage()">
            <mx:dataProvider>
              <mx:Array>
                  <mx:String>lastPage</mx:String>
              </mx:Array>
          </mx:dataProvider>
   </mx:LinkBar>
</mx:HBox>
<mx:Spacer />
</mx:Panel>
</mx:Panel>