how to convert zend_paginator to ajax in zend framework - zend-framework

Question

this is my action,currently my page is refreshing i want it with ajax.so that without refreshing the whole page my pagination div is refeshing loading the content from DB.
public function calllogsAction(){
if(!Zend_Auth::getInstance()->hasIdentity()){
$this->_redirect('login/login');
}
else{
$request = $this->getRequest();
$phone_service_id = $request->getParam("id");
$registry = Zend_Registry::getInstance();
$DB = $registry['DB'];
$sql ="SELECT caller_name,call_number,call_start_time,call_duration,call_direction FROM CALL_LOG WHERE phone_service_id = $phone_service_id";
$result = $DB->fetchAll($sql);
$page=$this->_getParam('page',1);
$paginator = Zend_Paginator::factory($result);
$paginator->setItemCountPerPage(10);
$paginator->setCurrentPageNumber($page);
$this->view->paginator=$paginator;
$page = $paginator->getCurrentPageNumber();
$perPage = $paginator->getItemCountPerPage();
$total = $paginator->getTotalItemCount();
$A = ($page - 1) * $perPage + 1;
$B = min($A + $perPage - 1, $total);
$C = $total;
$this->view->assign('url', $request->getBaseURL());
$this->view->assign('total',$total );
$this->view->assign('page',$page );
$this->view->assign('A',$A );
$this->view->assign('B',$B );
$this->view->assign('C',$C );
}
}
and this is my view.i have much more in my view but the pagination is here si i want to refresh this div
<div class="container" id="actualbody" style="margin-left:168px;">
<?php
$sr_no = 1;
foreach($this->paginator as $record){
if($sr_no % 2 == 0){
$style = 'class="even-row"';
}
else{
$style = 'class="odd-row"';
<tr <?php echo $style;?>>
<td class="sorting_1"> <input type="checkbox" /> </td>
<td ><?php if($record->call_direction =="Outgoing"){?> <img src=" <?php echo $this->baseUrl('/assets/images/outgoing.png'); ?> " /> <?php } elseif($record->call_direction =="Missed") {?> <img src=" <?php echo $this->baseUrl('/assets/images/misses.png'); ?> " /> <?php } else { ?> <img src=" <?php echo $this->baseUrl('/assets/images/incoming.png'); ?> " /> <?php }?></td>
<td><?php echo $record->caller_name;?></td>
<td><?php echo $record->call_number;?></td>
<td ><?php echo $record->call_start_time;?></td>
<td ><?php echo $record->call_duration;?></td>
</tr>
<?php $sr_no ++; }?>
<div> Showing <?= $this->A; ?> to <?= $this->B; ?> of <?=$this->C; ?> entries </div>
<div> <?php echo $this->paginationControl($this->paginator, 'Sliding', 'pagination.phtml'); ?></div>
</div>
how can i make my pagination through ajax
this pagination.phtml
<div class="pagination" style="width:100%">
<div style="float:left;width:28%">
</div>
<div style="float:right;width:70%;">
<!-- First page link -->
<?php if (isset($this->previous)): ?>
<span class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled">Start</span>
<?php else: ?>
<span class="next fg-button ui-button ui-state-default ui-state-disabled">Start</span>
<?php endif; ?>
<!-- Previous page link -->
<?php if (isset($this->previous)): ?>
<span class="previous fg-button ui-button ui-state-default ui-state-disabled">Previous</span>
<?php else: ?>
<span class="next fg-button ui-button ui-state-default ui-state-disabled">Previous</span>
<?php endif; ?>
<!-- Numbered page links -->
<?php foreach ($this->pagesInRange as $page): ?>
<?php if ($page != $this->current): ?>
<span class="fg-button ui-button ui-state-default"><?= $page; ?></span>
<?php else: ?>
<span class="fg-button ui-button ui-state-default ui-state-disabled" ><?= $page; ?></span>
<?php endif; ?>
<?php endforeach; ?>
<!-- Next page link -->
<?php if (isset($this->next)): ?>
<span class="next fg-button ui-button ui-state-default">Next</span>
<?php else: ?>
<span class="next fg-button ui-button ui-state-default ui-state-disabled">Next</span>
<?php endif; ?>
<!-- Last page link -->
<?php if (isset($this->next)): ?>
<span class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default">End</span>
<?php else: ?>
<span class="next fg-button ui-button ui-state-default ui-state-disabled">End</span>
<?php endif; ?>
</div>
edited
i add this code
jQuery(function($){
var container = $('#paged-data-container');
var overlay = $('<div>').addClass('loading overlay');
$('.pagination-control').find('a').live('click', function(){
var href = this.href;
var pos = this.rel == 'next' ? '-120%' : '120%';
if (Modernizr.history) {
history.pushState(location.pathname, '', href);
}
container.find('.data').animate({
left: pos
}, 'slow', function(){
var dataContainer = container.find('.paged-data').addClass('loading');
$.get(href, { format: 'html' }, function(data){
dataContainer.removeClass('loading');
container.html(data);
}, 'html');
});
return false;
});
var initialPath = location.pathname;
$(window).bind('popstate', function(e){
// Prevent popstate handler dealing with initial page load
if (location.pathname == initialPath) {
initialPath = null;
return;
}
container.append(overlay);
$.get(location.pathname, { format: 'html' }, function(data){
container.html(data);
}, 'html');
});
});
also add this code to my controller
public function init(){
$this->_helper->ajaxContext->addActionContext('calllogs', 'html')
->initContext();
}
now my collogs.phtml looks like this
<?php
include_once("header.phtml");
include_once("blue1.phtml");
include_once("sidebar.phtml");
?>
<div id="paged-data-container">
<?php echo $this->render('login/calllogs_page.phtml') ?>
</div>
<?php include_once("footer.phtml"); ?>
and this is my calllogs_page.phtml
<?php $paginationControl = $this->paginationControl(
$this->paginator, 'All', 'pagination.phtml') ?>
old stuff here
<div class="pagination-control">
<div class="fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix" style="height:35px">
<?php if (count($this->paginator)): ?>
<div class="dataTables_info" style="float:left;"> Showing <?= $this->A; ?> to <?= $this->B; ?> of <?=$this->C; ?> entries </div>
<div class="pagination-control" style="margin-left:173px;">
<?php echo $paginationControl ?>
</div>
now my page is changing in address bar when ever i click on any pagination link but nothing happens than
this is the jquery which
$(function($){
$('.pagination-control').find('a').live('click', function(){
var link = $(this);
var container = link.parents('.paged-data-container');
$.get(link.attr('href'), { format: 'html' }, function(data){
container.html(data);
}, 'html');
return false;
});
});

Answer 1

Follow these tutorials: Zend framework video tutorials
Starting from video 11 Zend_Paginator is introduced. Later on it is modified to use Ajax in another video.
I really recommend that you look into it.