how to convert zend_paginator to ajax in 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)): ?>
          <a href="<?= $this->url(array('page' => $this->first)); ?>"> <span class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled">Start</span></a> 
    <?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)): ?>
          <a href="<?= $this->url(array('page' => $this->previous)); ?>"><span class="previous fg-button ui-button ui-state-default ui-state-disabled">Previous</span></a>
    <?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): ?>
            <a href="<?= $this->url(array('page' => $page)); ?>"><span class="fg-button ui-button ui-state-default"><?= $page; ?></a></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)): ?>
          <a href="<?= $this->url(array('page' => $this->next)); ?>"><span class="next fg-button ui-button ui-state-default">Next</span></a> 
    <?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)): ?>
          <a href="<?= $this->url(array('page' => $this->last)); ?>"><span class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default">End</span></a>
    <?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.