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.phpclass 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.phpdefine("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
Siga-me
Parabéns cara ! eu estava tentando fazer, e o exemplo foi muito útil para a finalização da minha tarefa. Obrigado.. t+++
[...] 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 [...]
Olá,
Nao funcionou... a ampuleta fica rodando sem fim.
!?
Alberto
@Alberto é configuração do seu PHP.
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?
verifiquei e não acontece este problema no exemplo acima.
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?
Excelente. Me ajudou e o fiz em 10 minutos.
Parabens
xD
A única coisa que modifiquei foi que trabalhei com "int" ao invés de Number e não encontrei problema algum.
Abraços
Muito boa essa paginaçao. Parabens cara.
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.
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.
Qual programa estas usando como Debug?
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