ZF2에서 Ajax 페이지 매김?

Question

저는 ZF2에 새롭지 만, ZF에 몇 가지 프로젝트를 수행했습니다. ZF에서 아약스 페이지 매김을 사용하지 않았습니다. 하지만 이제는 ZF2에 아약스 페이지 매김이 필요합니다. 어떻게해야합니까?

Answer 1

그것이 내가하는 방법입니다.

FIRST STEP (루트 파일) :

나는 목록 것보다 매김 노선, 개의 다른를 정의합니다. 컨트롤러가 가능한 한 간단하게 작동하도록하려면 이렇게하십시오.

이유 나는 당신이 할 때 AJAX 방금 목록 자체를 원하는 호출하기 때문에 고객 컨텐츠 템플릿이 생성되지 헤더 : 두 번째 단계 (module.config.php)

'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', 
       ), 
      ), 
     ), 

. 내 고객 목록이이 템플릿에 있습니다.

이 템플릿을 호출하면 검색되는 목록을 제외한 모든 HTML 코드가있는 고객 목록 템플릿을 정리할 수 있습니다.

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

세 번째 단계 (Controller 클래스) :

public function listAction() { 
    (...) 

    $view = new ViewModel; 

    //SET THE VARIABLES NEEDED BY THE TEMPLATE VIEW 
    $view->setVariables($variables); 
    //SET THE TEMPLATE VIEW 
    $view->setTemplate('customers/list'); 

    return $view; 
} 

public function pagerAction() { 
    //POST DATA 
    $data = get_object_vars($this->getRequest()->getPost()); 

    //GET DATA FROM THE DATABASE 
    $customers = $this->customersMapper()->getCustomers($data); 

    //INITIALIZE THE PAGINATOR IN CASE THE 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 THE PAGE NUMBER FROM THE ROUTE 
    $paginator->setCurrentPageNumber( 
     $this->getEvent()->getRouteMatch()->getParam('page', 1) 
    ); 

    //CREATE THE VIEW 
    $view = new ViewModel; 

    //SET THE VARIABLES NEEDED BY THE TEMPLATE VIEW 
    $view->setVariables( 
     array(
      'customers' => $paginator, 
     ) 
    ); 

    //SET THE TEMPLATE VIEW (THE TEMPLATE IS THE ONE DEFINED IN module.config.php) 
    $view->setTemplate('customers-content'); 

    $viewHTML = $this->serviceManager->get('viewrenderer')->render($view); 

    //THAT'S THE INFORMATION THAT'LL BE RETURNED BACK TO THE CLIENT 
    $result = array( 
     "success" => true, 
     "HTML" => $viewHTML 
    ); 

    //PREPARE THE RESPONSE WHITH THE ARRAY CONVERTED TO A JSON OBJECT 
    $this->response->setContent(\Zend\Json\Json::encode($result)); 

    //RETURN THE RESPONSE 
    return $this->response; 
} 

네 번째 단계 (티켓 content.phtml) :

<div id="customersList"> 
    <!-- HTML CODE THAT GENERATE LISTS' ROWS --> 
    <?php 
     //CALL TO THE PAGINATION TEMPLATE. WE PASS THE customers PAGINATOR CREATED IN THE CONTROLLER'S pagerAction() 
     echo $this->paginationControl($this->customers, 'Sliding', 'customers/customers-pagination.phtml'); 
    ?> 
    <!-- HTML CODE THAT CLOSES THE LIST --> 
</div> 

다섯 번째 단계 (고객-매김 .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 as $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> 

여섯 번째 단계 (템플릿에서 자바 스크립트) :

장소 그것은 당신이 원하는 목적지까지 고객-list.phtml, 고객-content.phtml, 고객-pagination.phtml.

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

제 7 단계 (자바 스크립트 파일) :

내가 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); 
    }, this)); 
}; 

//CLICK HANDLER FUNCTION 
Customers.prototype.clickHandler = function (event) { 
    var route = event.data.route; 

    //ASYNC CALL. IT MUST BE json TYPE 
    $.post( 
     route, 
     null, 
     $.proxy(function(data) { 
      //IF THE CALL IS SUCCESS (REMMBER THE RESULT RETURNED FROM THE SERVER, 'success' AND 'HTML') 
      if (data.success) { 
       var container = $("#customersList"); 

       container.html(data.HTML); 
      } 
     }, this), 
     'json' 
    ); 
} 

은 아마 오타 오류가 사용하지만, 그것을 작동합니다.