zend framework2 - Ajax pagination in ZF2? -

i new in zf2 did projects in zf. didn't used ajax pagination in zf. need ajax pagination in zf2. how do that?

that's how it.

first step (routes file):

i define route pagination, diferent list one. way have controller functions simple possible.

'customers' => array(     'type' => 'literal',     'options' => array(         'route' => '/customers',         'defaults' => array(             'controller' => 'customers_controller',             'action'     => 'list',         ),     ),     'may_terminate' => true,     'child_routes' =>array(         //list         'list' => array(             'type' => 'segment',             'options' => array(                 'route' => '/[:page]',                 'defaults' => array(                 'controller' => 'customers_controller',                     'action'     => 'list',                 ),             ),         ),         //pagination         'pager' => array(             'type' => 'segment',             'options' => array(                 'route' => '/pager[/:page]',                 'defaults' => array(                     'controller' => 'customers_controller',                     'action'     => 'pager',                 ),             ),         ), 

second step (module.config.php):

the reason create customers-content template because when ajax call want list itself, not header. customers list in template.

it helps keep clean customers-list template, has every html code except list, retrieved call template.

'view_manager' => array(      'template_path_stack' => array(          __dir__ . '/../view',      ),     'template_map' => array(         'customers-content' => __dir__ . '/../view/customers/customers-content.phtml',     ), ), 

third step (controller class):

public function listaction() {     (...)      $view = new viewmodel;      //set variables needed template view     $view->setvariables( $variables );     //set template view     $view->settemplate( 'customers/list' );      return $view; }  public function pageraction() {     //post data     $data = get_object_vars( $this->getrequest()->getpost() );      //get data database     $customers = $this->customersmapper()->getcustomers( $data );      //initialize paginator in case database returns rows     if ( is_array( $customers ) ) {         $paginator = new \zend\paginator\paginator( new \zend\paginator\adapter\arrayadapter( $customers ) );     } else {         $paginator = $customers;     }      $paginator->setitemcountperpage( 100 );      //set page number route     $paginator->setcurrentpagenumber(          $this->getevent()->getroutematch()->getparam( 'page', 1 )     );      //create view     $view = new viewmodel;      //set variables needed template view     $view->setvariables(          array(             'customers' => $paginator,         )     );      //set template view (the template 1 defined in module.config.php)     $view->settemplate( 'customers-content' );      $viewhtml = $this->servicemanager->get( 'viewrenderer' )->render( $view );      //that's information that'll returned client     $result = array(          "success" => true,         "html" => $viewhtml     );      //prepare response whith array converted json object     $this->response->setcontent( \zend\json\json::encode( $result ) );      //return response     return $this->response; } 

fourth step (ticket-content.phtml):

<div id="customerslist">     <!-- html code generate lists' rows -->     <?php         //call pagination template. pass customers paginator created in controller's pageraction()         echo $this->paginationcontrol( $this->customers, 'sliding', 'customers/customers-pagination.phtml' );     ?>     <!-- html code closes list --> </div> 

fifth step (customers-pagination.phtml):

<a id="pager_first"      href="<?php echo $this->url( 'customers/filter', array( 'page' => $this->first ) ); ?>">         &lt;&lt; first </a> <a id="pager_previous"      href="<?php echo $this->url( 'customers/filter', array( 'page' => $this->previous-9 ) ); ?>">         &lt;&lt; previous </a> <?php foreach ( $this->pagesinrange $page ): ?>     <a id="<?= "pager_" . $page ?>">         href="<?php echo $this->url( 'customers/filter', array( 'page' => $page ) ); ?>">             <?php echo $page; ?>     </a> <?php endforeach; ?> <a id="pager_next"      href="<?php echo $this->url( 'customers/filter', array( 'page' => $this->next+9 ) ); ?>">         &lt;&lt; next </a> <a id="pager_last"     href="<?php echo $this->url( 'customers/filter', array( 'page' => $this->last ) ); ?>">         last &gt;&gt; </a> 

sixth step (javascript in template):

place wherever want, customers-list.phtml, customers-content.phtml, customers-pagination.phtml.

$( function() {     customers = new customers();     customers.initpagerelements( ["pager_first","pager_previous","pager_1-n","pager_next","pager_last"] ); } ); 

seventh step (javascript file):

i use jquery

//create customers class customers = function () {};  //init pager elements function customers.prototype.initpagerelements = function () {     pagerelements = arguments[ 0 ];      //iterate each pager element     $.each( pagerelements, $.proxy( function( index, elementid ) {         var element = $( "#" + this.common.escapeselector( elementid ) );          var route = element.attr( "href" );          item.click( { "route" : route }, this.clickhandler );     }, ) ); };  //click handler function customers.prototype.clickhandler = function ( event ) {     var route = event.data.route;      //async call. must json type     $.post(          route,          null,          $.proxy( function( data ) {             //if call success (remmber result returned server, 'success' , 'html')             if ( data.success ) {                 var container = $( "#customerslist" );                  container.html( data.html );             }         }, ),         'json'     ); } 

maybe there typo errors, should work.