2011-01-24 17 views
6

en el controlador que tengo:cómo ajaxify resultados zend_pagination (ya trabajar con partialoop) usando jquery

$paginator = Zend_Paginator::factory($mdlPost->getPosts($this->moduleData->accordion, 'name ASC')); 
    if(isset($params['cities'])) { 
      $paginator->setCurrentPageNumber(intval($params['cities'])); 
      } 
$paginator->setItemCountPerPage(4); 
$this->view->posts = $paginator;   

en la vista de que tengo algo como esto:

if ($this->posts != null) {?> 
    <div id="cities_accord" class="news"> 
    <?php echo $this->partialLoop('partials/post-min.phtml', $this->posts); ?> 
    </div> 
    <?php echo $this->paginationControl($this->posts, 
           'Sliding', 
           'public/pagination_cont.phtml'); 
} 

la parcial/post -min.phtml

<?php 
$color = array(1=>'spring',2=>'summer',3=>'autumn',4=>'winter'); 
?> 

<div id='<?php echo $color[$this->partialCounter] ?>' class="accordion_post"> 
<?php 
$link = Digitalus_Uri::get(false, false, array('openCity' =>  
    $this->id));//$color[$this->partialCounter])); 
?> 

<h1 class="accordion_post_title"><?php echo $this->title ?></h1> 

<p><?php echo $this->teaser ?> <a href="<?php echo $link;?>"><i>read more</i></a></p> 
</div> 

la pagination_cont.phtml tomado de este enlace zend (http://framework.zend.com/manual/en/zend.paginator.usage.html) mostrará enlaces que pasarán params al controlador a buscar el correspondiente toda página que está trabajando bien por ahora

pero quiero cambiar esto para que i a ser capaz ajaxify la Obtenidos (es decir, sólo un único paginado valor en lugar de volver a cargar toda la página) resultados ¿cómo puedo hacerlo utilizando jquery y qué debo cambiar ...

** EDITAR: sería bueno tener un fail-save, si es posible, para los navegadores (usuarios) que deshabilitaba javascript para ver lo mismo al volver a cargar la página (es decir, manteniendo el estado actual de if (javascript_not_enabled)) **

Respuesta

1

lo tiene y que muchas gracias a @Phil Brown:

en el int controlador() cambiar el tipo de respuesta a JSON

class NewsController extends Zend_Controller_Action 

    { 

     public function init() 

     { 

      $contextSwitch = $this->_helper->getHelper('contextSwitch'); 

      $contextSwitch->addActionContext('list', 'JSON') 

         ->initContext(); 

     } 



     // ... 

    } 


public listAtcion() { 

    // ............. 

    $paginator = Zend_Paginator::factory($mdlPost->getPosts($this->moduleData->accordion, 'name ASC')); 
    if(isset($params['cities'])) { 
     $paginator->setCurrentPageNumber(intval($params['cities'])); 
     } 
    $paginator->setItemCountPerPage(4); 

    $post = array(); 
    foreach($paginator as $post) { 
     $post[] = $post; 
    } 

    $this->view->post = $paginator; 

    #TODO //add a check here for non-ajax requests (#improvment) 
    $this->view->posts = $paginator;  

} 

en uno de los puntos de vista (muy probablemente en el pagination_cont.phtml) en el controlador de paginación añadir une el ajax

<?= $this->ajaxLink (
       $this->url('cities'=>$this->page_num),array('id'=>'div_id','complete'=>'js_method(json_data)','method'=>post) ,array('format'=>'JSON')); 

y añadir una función de JavaScript de js_method (json_data) para modificar el div con id = 'div_id' con unos datos JSON

function js_method(json_data) { 
    var content = parse.JSON(json_data); 
    $('#div_id').html(''); 
    //fill it with the reposnse content some thing like $('#div_id').append(content); 
    } 
3

Esto es lo que hice en el pasado.

Primero, configure AjaxContext action helper para habilitar el contexto html en la acción de su controlador.

Agregue una vista .ajax.phtml que solo contenga la sección de marcado que se puede reemplazar a través de AJAX, así como los enlaces de control de paginación. Probablemente puedas copiar esto fuera de tu vista normal. Reemplazar esa sección en su vista normal con algo como

<div id="reloadable-content"> 
    <?php echo $this->render('controller/action.ajax.phtml') ?> 
</div> 

Esto se asegurará de que sus peticiones iniciales y cualquier participación no AJAX todavía incluirán el contenido correcto. La identificación <div> es puramente para hacer referencia al bloque cargable en JavaScript.

También asegúrese de incluir su archivo JS (usando headScript) en la vista normal solamente.

Ahora, en su archivo JS, agregue discretamente el enlace de evento apropiado a los enlaces del paginador. Como reemplazará la sección de control de paginación para reflejar la página actual correcta y otros enlaces, probablemente sea mejor hacerlo mediante el enlace jQuery live. También estoy suponiendo que va a envolver el control de paginación con algún tipo de elemento de identificación (por ejemplo <div class="pagination-control">)

$('.pagination-control').find('a').live('click', function(e) { 
    var link = $(this); 
    $('#reloadable-content').load(link.attr('href'), { format: 'html' }); 
    return false; 
}); 

Tenga en cuenta que en el uso de este método, se pierde la capacidad de navegar por el páginas buscadas usando los botones normales del navegador hacia atrás/adelante. También perderá la capacidad de marcar páginas directamente (aunque siempre podría proporcionar un enlace permanente a la página actual como parte del contenido cargado de AJAX).

Puede utilizar algo como el jQuery history plugin si realmente le preocupa, pero eso requerirá un mayor trabajo del lado del cliente.

Otra advertencia es que lo anterior solo funcionará con enlaces de paginación.Si desea utilizar un formulario con selección de página desplegable, debe agregar otro controlador de eventos para el envío.

Cuestiones relacionadas