Cakephp 3：Ajax分页

Question

I am trying to make ajax pagination in cakephp 3. I have add a simple jquery code to make jquery pagination But I know this is not the actual solution. Here is my code that I have tried

$('document').ready(function(){
        $(".pagination a").click(function(){
               $("body").load(this.href);
               return false;
        })
})

How can I send ajax request for pagination and fetch only content in view page ?

I need help in two options 1) What will be ajax request (path/page number) ? 2) What will be controller method for content fetch ?

Answer 1

Hi I found this example on the internet, if it can help you. here

Ajax :

$('body').delegate('.ajax-pagination a', 'click', function() {
        $this = $(this);
        $this.parents('div.ajax-response').filter(':first').block();
    pageUrl = $this.attr('href');
        $.get(pageUrl, function(data) {
            $this.parents('div.ajax-response').filter(':first').html(data);
        });
        return false;
    });

then you must add class “ajax-pagination” in parent div of included pagination element.I mean

<div class="ajax-pagination">
    <?php echo $this->element('paging_links');  ?>
</div>

My pagining_links.ctp has following code:

<?php
$this->Paginator->options(array(
    'url' => array_merge(array(
        'controller' => $this->request->params['controller'],
        'action' => $this->request->params['action'],
    ) , $this->request->params['pass'], $this->request->params['named'])
));
echo $this->Paginator->prev('&laquo; ' . __lang('Prev') , array(
    'class' => 'prev',
    'escape' => false
) , null, array(
    'tag' => 'span',
    'escape' => false,
    'class' => 'prev'
)), "n";
echo $this->Paginator->numbers(array(
    'modulus' => 2,
    'first' => 3,
    'last' => 3,
    'ellipsis' => '<span class="ellipsis">&hellip;.</span>',
    'separator' => " n",
    'before' => null,
    'after' => null,
    'escape' => false
));
echo $this->Paginator->next(__lang('Next') . ' &raquo;', array(
    'class' => 'next',
    'escape' => false
) , null, array(
    'tag' => 'span',
    'escape' => false,
    'class' => 'next'
)), "n";
?>

whenever user clicks the pagination link then we makes the ajax request to get the content and replace the existing content with requested content in parent of its div. Refer my complete view file code (Ajax based pagination and Sorting )

<div class="ajax-response">
            <?php echo $this->element('paging_counter');?>
            <table class="table table-striped table-bordered">
            <tr>
                <th rowspan="2" class="dl"><div class="ajax-pagination"><?php echo $this->Paginator->sort('name');?></div></th>
            </tr>

            <?php
            if (!empty($countries)):
                foreach ($countries as $country):
                    <tr>
                        <td class="dl"><?php echo $country['Country']['name'];?></td>
                    </tr>
                    <?php
                endforeach;
            else:
                ?>
                <tr>
                    <td class="notice" colspan="19"><?php echo __lang('No countries available');?></td>
                </tr>
                <?php
            endif;
            ?>
        </table>
        <?php if(!empty($countries)):?>
            <div class="clearfix">

                <div class="pull-right">
                    <?php echo $this->element('paging_links');  ?>
               </div>
            </div>      
        <?php endif;?>

</div>