Welcome to the Cookbook

loading...

4.9.3 Paginazione AJAX

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

More information about translations

È molto semplice incorporare le funzionalità Ajax riguardo la paginazione. Le uniche aggiunte di codice richieste sono l'inclusione della libreria Javascript Prototype, l'impostazione dell'indicatore (un'icona di caricamento in un DIV) e la scelta di un DIV che verrà aggiornato (al posto di ricaricare la pagina).

Non dimenticare di aggiungere il componente RequestHandler, necessario per poter utilizzare le richieste Ajax verso il controller:

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

4.9.3.1 Modifiche a Layout

Prima di tutto, includeremo la libreria Prototype nell'header, imposteremo l'immagine che indica lo stato (spinner.gif) e il DIV principale che conterrà tutto, "content".

Un layout che include tutti questi elementi dovrebbe somigliare a questo:

<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 Modifiche al View

L'unica configurazione extra per la paginazione Ajax può essere fatta usando il metodo options() di PaginationHelper, il quale imposta i parametri Ajax. In questo caso, specificheremo che tutti i link di paginazione dovranno aggiornare l'elemento con ID ‘content’ con i dati restituiti dalla richiesta, e mostreremo ‘spinner’ come indicatore di caricamento.

Se la chiave ‘update’ non è specificata, PaginationHelper restituirà link non-Ajax di paginazione e di ordinamento. 

<?php 
// Imposta l'elemento da aggiornare e quello dell'indicatore attraverso il DOM ID
$paginator->options(array('update' => 'content', 'indicator' => 'spinner'));
 
echo $paginator->prev('<< Precedente', null, null, array('class' => 'disabled'));
 
echo $paginator->next('Successiva >>', null, null, array('class' => 'disabled')); 
?>

<!-- restituisce X of Y, dove X è la pagina corrente e Y il numero di pagine -->
<?php echo $paginator->counter(); ?>
  1. <?php
  2. // Imposta l'elemento da aggiornare e quello dell'indicatore attraverso il DOM ID
  3. $paginator->options(array('update' => 'content', 'indicator' => 'spinner'));
  5. echo $paginator->prev('<< Precedente', null, null, array('class' => 'disabled'));
  7. echo $paginator->next('Successiva >>', null, null, array('class' => 'disabled'));
  8. ?>
  9.  
  10. <!-- restituisce X of Y, dove X è la pagina corrente e Y il numero di pagine -->
  11. <?php echo $paginator->counter(); ?>
« Pagination in Views | Custom Query Pagination »