Welcome to the Cookbook

loading...

4.9.3 AJAX Pagination

The original text for this section has changed since it was translated. Please help resolve this difference. You can:

More information about translations

É muito simples incorporar funcionalidades Ajax na paginação. O único código extra requerido é a inclusão da biblioteca Javascript Prototype, e a especificação de uma DIV para ser atualizada com o conteúdo de paginação (ao invés de reler a página). Pode-se também definir o parâmetro indicator contendo o id de uma DIV que será mostrada quando o conteúdo da paginação estiver sendo lido e ocultado ao término de sua leitura.

Não se esqueça de adicionar o componente RequestHandler para detectar as chamadas Ajax em seu controller.

var $components = array('RequestHandler');
  1. var $components = array('RequestHandler');

4.9.3.1 Mudanças de Layout

Primeiramente, nós vamos incluir a biblioteca Prototype no cabeçalho, definir nossa imagem indicadora de status (spinner.gif) e definir o DIV principal que conterá nossos dados, "content".

Aqui você vê como layout que inclui estes elementos se parece (parcialmente):

<head>
    <title><?php echo $title_for_layout; ?></title>
        <?php echo $javascript->link(array('prototype')); ?>
        <style type="text/css">
                div.disabled {
                        display: inline;
                        float: none;
                        clear: none;
                        color: #C0C0C0;
                }
        </style>
</head>
<body>
<div id="main">
        <div id="spinner" style="display: none; float: right;">
                <?php echo $html->image('spinner.gif'); ?>
        </div>
        <div id="content">
                <?php echo $content_for_layout; ?>
        </div>
</div>
</body>
</html>
  1. <head>
  2. <title><?php echo $title_for_layout; ?></title>
  3. <?php echo $javascript->link(array('prototype')); ?>
  4. <style type="text/css">
  5. div.disabled {
  6. display: inline;
  7. float: none;
  8. clear: none;
  9. color: #C0C0C0;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div id="main">
  15. <div id="spinner" style="display: none; float: right;">
  16. <?php echo $html->image('spinner.gif'); ?>
  17. </div>
  18. <div id="content">
  19. <?php echo $content_for_layout; ?>
  20. </div>
  21. </div>
  22. </body>
  23. </html>

4.9.3.2 Mudanças na View

A única configuração extra para a paginação Ajax é feita usando-se o método options() do PaginationHelper, a partir do qual se especificam os parâmetros Ajax requeridos. Neste caso, estamos definindo que todos os links de paginação devem atualizar o elemento com o ID 'content' com os dados resultantes e queremos que 'spinner' apareça como indicador de carregamento.

Se a chave 'update' não for especificada, o PaginationHelper irá exibir links não-Ajax para ordenação e paginação.

<?php 
// Define os elementos a ser atualizados (update) e indicador de carga (indicator) através de seu DOM ID
$paginator->options(array('update' => 'content', 'indicator' => 'spinner'));
 
echo $paginator->prev('<< Anterior', null, null, array('class' => 'disabled'));
 
echo $paginator->next('Próximo >>', null, null, array('class' => 'disabled')); 
?>
 
<!-- exibe X de Y, sendo X a página atual e Y o total de páginas -->
<?php echo $paginator->counter(); ?>
  1. <?php
  2. // Define os elementos a ser atualizados (update) e indicador de carga (indicator) através de seu DOM ID
  3. $paginator->options(array('update' => 'content', 'indicator' => 'spinner'));
  5. echo $paginator->prev('<< Anterior', null, null, array('class' => 'disabled'));
  7. echo $paginator->next('Próximo >>', null, null, array('class' => 'disabled'));
  8. ?>
  10. <!-- exibe X de Y, sendo X a página atual e Y o total de páginas -->
  11. <?php echo $paginator->counter(); ?>
« Paginação nas Views | Paginação com Consultas Personalizadas »