Paginação de resultados em DataGrig

Ola galera. Em um exemplo anterior havia mostrado como filtrar dinamicamente dados do Flex. Neste vou usar a mesma estrutura e apenas inserir paginação. É isso mesmo, paginação dos resultados.

A paginação do Flex segue o mesmo conceito de páginas WEB paginação resultados php MySQL.

No PHP, a Classe é desenvolvida de modo que receba, além do parametro de consulta, dois parametros extras que serão usados para limitar a pesquisa.

Arquivo amfphp/services/114/cidadeService.php
class cidadeService
{
    function BunscaMensagens($pesquisa, $Inicial, $NumRegistros)
    {
        $connect = mysql_connect(DB_HOST, DB_USER, DB_PASS);
        mysql_select_db(DB_NAME);

        $queryTotal = sprintf("SELECT * " .
                              "FROM `099_cidade`" .
                              "WHERE `CIDADE_DESCRICAO` LIKE '%%%s%%' " ,
                                $pesquisa);
        $result = mysql_query(utf8_decode( $queryTotal ));
        $numLinhas = mysql_num_rows($result);

        $query = sprintf("SELECT * " .
                         "FROM `099_cidade`" .
                         "WHERE `CIDADE_DESCRICAO` LIKE '%%%s%%' " .
                         "LIMIT %s, %s"  ,
                            $pesquisa,
                            $Inicial,
                            $NumRegistros);
        $result = mysql_query(utf8_decode($query));
        $arrayRetorno = null;
        while($rowMensag = mysql_fetch_assoc($result))
        {
            $arrayRetorno[] = $rowMensag;
        }
        mysql_close($connect);
        return array($numLinhas , $arrayRetorno);
    }
}

Veja que ele faz duas consultas SQL. A primeira é apenas para pegar o número de registro e a segunda para recuperar os dados.

No fonte há num SQL que deve ser executado em seu projeto.

As configurações estão no Arquivo globals.php.

Arquivo amfphp/globals.php
define("DB_HOST", "localhost");
define("DB_USER", "cidades");
define("DB_PASS", "");
define("DB_NAME", "cidades");

Veja que é retornado do PHP um Array com dois elementos. O Primeiro elemento contém a quantidade de registros para a pesquisa atual, e o segundo elemento possui os dados a serem apresentados no DataGrid.

Arquivo main.mxml
<mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.rpc.events.ResultEvent;
        import mx.rpc.remoting.mxml.RemoteObject;

        private var time:Timer = new Timer(1000, 1);

        // guarda a página atual
        [Bindable]
        private var paginaAtual:Number=0;
        [Bindable]
        private var TotalRegistros:Number = 0;

        private function init():void
        {
            // Timer para aguardar quando digita
            time.addEventListener("timer", TimeEnd);
            // Evento para quando digitar
            campoBusca.addEventListener(Event.CHANGE, changeFiltro)
            // Carrega o DataGrid
            PesquisarMensagens();
        }
        private function changeFiltro(e:Event):void
        {
            // Para o Timer, se já estiver parado, não faz nada
            time.stop();
            // Inicia o Timer
            time.start();
        }
        private function TimeEnd(e:TimerEvent):void
        {
            // se o evento for executado, chama a função que faz a busca
            paginaAtual = 0;
            PesquisarMensagens();
        }

        public function PesquisarMensagens():void
        {
            var remote:RemoteObject = new RemoteObject("RemotingMessage");
            remote.showBusyCursor = true;
            remote.source = "114.cidadeService";
            remote.addEventListener(ResultEvent.RESULT, ResultBusca)
            remote.getOperation("BunscaMensagens").send(campoBusca.text,
                Number(cbQuantidade.selectedLabel)*paginaAtual,
                cbQuantidade.selectedLabel);
        }
        private function ResultBusca(e:ResultEvent):void
        {
            // É retornado um array com dois elementos.
            // o primeiro elemento esta o total de registro
            // o Segundo esta a lista de dados
            var lista:Array = e.result as Array;

            TotalRegistros = lista[0];
            dgCidades.dataProvider = lista[1];

            // verifica as próximas páginas
            var numPaginas:int =TotalRegistros / Number(cbQuantidade.selectedLabel)
            if(numPaginas > paginaAtual)
            {
                BTavancar.enabled = true;
            }
            else
            {
                BTavancar.enabled = false;
            }
        }

        private function avancar():void
        {
            paginaAtual += 1;
            PesquisarMensagens();
        }
        private function voltar():void
        {
            paginaAtual -= 1;
            PesquisarMensagens();
        }
        private function changeCombobox():void
        {
            paginaAtual = 0;
            PesquisarMensagens();
        }
    ]]>
</mx:Script>
<mx:Label x="10" y="61" text="Texto de busca:"/>
<mx:TextInput id="campoBusca" x="114" y="59" width="281"/>

<mx:DataGrid id="dgCidades" x="10" width="690" bottom="40" top="87">
    <mx:columns>
        <mx:DataGridColumn headerText="Estado" dataField="CIDADE_UF" width="60"/>
        <mx:DataGridColumn headerText="Cidade" dataField="CIDADE_DESCRICAO"/>
        <mx:DataGridColumn headerText="CEP" dataField="CIDADE_CEP" width="100"/>
    </mx:columns>
</mx:DataGrid>
<mx:Button id="BTvoltar" label="<<" left="10" bottom="10"
    enabled="{paginaAtual!=0}" click="voltar()" />
<mx:Button id="BTavancar" label=">>" left="62" bottom="10"
    click="avancar()" />
<mx:ComboBox id="cbQuantidade" left="238" bottom="10"
    change="changeCombobox()" >
    <mx:dataProvider>
        <mx:Array>
            <mx:Object label="10"/>
            <mx:Object label="20"/>
            <mx:Object label="50"/>
        </mx:Array>
    </mx:dataProvider>
</mx:ComboBox>
<mx:Label left="298" bottom="12"
    text="{TotalRegistros} Registros encontrados" />
<mx:Label x="114" text="Registros por página:" bottom="12"/>

Veja o resultado

O Código fonte esta disponível em aqui.

Fique por dentro de nossas novidades, ideias e atualizações