Se esta querendo aprender ou iniciar novos projetos em Flex, clique aqui

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.

Gostou? Não esqueça de curtir!

Ou compartilhe o link com seus amigos

14 comentários

Deixe uma resposta

  1. Tive um problema quando estava desenvolvendo um sistema que tinha uma tabela com certa de 50.000 registros, e ela estava relacionada a outra tabela do tipo n:n, ou seja havia 3 tabelas para fazer este relacionamento...

    E tive uma grande complicação pelo fato de fazer 2 selects, mas procurando na internet achei uma maneira de fazer com apenas um select ele trazer os registros limitados mas com o numero de linhas encontrados...

    O esquema é o seguinte:
    SELECT SQL_CALC_FOUND_ROWS * FROM tabela LIMIT 50;
    e em seguida para pegar o total de linhas utilizar o comando sql:
    SELECT FOUND_ROWS()

    Espero que seja útil.

    Att, Marcos Seki

     
  2. Olá, estou com problema nessa linha:

    TotalRegistros = lista[0];

    quando faço o debug, o resiltado vem certo 24, mas ele fica dando como NaN

    TotalRegistros = NaN ao debugar

    Alguém sabe o pq, posta aqui.

     
  3. Qual programa estas usando como Debug?

     
  4. duvida;

    eu salvei o projeto na seguinte pasta:

    C:\Arquivos de programas\VertrigoServ\www\paginacao

    C:\Arquivos de programas\VertrigoServ\www\paginacao\bin-debug

    C:\Arquivos de programas\VertrigoServ\www\paginacao\src

    Helpe Me, como ficaria configurado o arquivo services-config.xml   ?


        
            
                
                    
                        
                    
                    
                        *
                    
                
            
        
        
            
                
            
        


    Estou perguntando porque ja tentei tudo, e a aplicação nao lista os registro, fica aquele icone de loading.

    onde estou errando?

    Obrigado Galera..

    Gostei muito desse site sobre FLEX. parabens.

     
  5. Muito boa essa paginaçao. Parabens cara.

     
  6. A única coisa que modifiquei foi que trabalhei com "int" ao invés de Number e não encontrei problema algum.

    Abraços

     
  7. Excelente. Me ajudou e o fiz em 10 minutos.

    Parabens

    xD

     
  8. Resolvi o problema:

      Quando há 823 registros, de acordo com o calculo abaixo:

    <code>
    var numPaginas:int =TotalRegistros / Number(cbQuantidade.selectedLabel)
    </code>

    São exibidas 16 páginas com 50 registros em cada, pois 823/50 = 16.46, este valor acaba sendo convertido para inteiro e o resultado sendo arredondando para baixo (no caso 16) fazendo com que a última página, com os 23 registros restantes, não apareca.

      Coloquei a função ceil da biblioteca Math, que faz arrendodamento para cima, o resultado agora foram 17 páginas, sendo que na ultima página aparece somente os 23 registros que faltam.

    <code>
    var numPaginas:int = Math.ceil(TotalRegistros / Number(cbQuantidade.selectedLabel));
    </code>

    Entendeu?

     
  9. verifiquei e não acontece este problema no exemplo acima.

     
  10. Tem um detalhe:

    Exemplo: tenho 175 registros, exibindo 50 por página aparecem 3 páginas, sendo exibido somente 150 registros, falta ainda uma pagina com 25.  Entende?

     
  11. @Alberto é configuração do seu PHP.

     
  12. Olá,
    Nao funcionou... a ampuleta fica rodando sem fim.
    !?
    Alberto

     
  13. [...] de como fazer essa paginação, então encontrei o blog do Eduardo Kraus onde tinha um exemplo de Paginação de resultados em DataGrig que quase me atendeu para o que eu precisava. Essencialmente, eu aproveitei a função de Timer que [...]

     
  14. Parabéns cara ! eu estava tentando fazer, e o exemplo foi muito útil para a finalização da minha tarefa. Obrigado.. t+++