pagination - ZF2中的Ajax分页？

Question

我是新手，ZF2但我在ZF. 我没有在ZF. 但现在我需要 ajax 分页ZF2。我怎么做？

Answer 1

我就是这样做的。

第一步（路线文件）：

我为分页定义了一条路线，与列表不同。我这样做是为了让控制器功能尽可能简单。

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

第二步（ module.config.php）：

我创建客户内容模板的原因是，当您进行 AJAX 调用时，您只需要列表本身，而不是标题。所以我的客户列表在这个模板中。

它有助于保持客户列表模板的清洁，该模板包含除列表之外的所有 HTML 代码，通过调用此模板来检索列表。

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

第三步（控制器类）：

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;
}

第四步（ticket-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>

第五步（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 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>

第六步（模板中的Javascript）：

将其放置在您想要的任何位置，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"] );
} );

第七步（JavaScript 文件）：

我使用 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'
    );
}

也许有拼写错误，但它应该工作。