Cakephp 3 : Ajax Pagination

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

Simply, you can use liveQuery Javascript library. you can download from here

1. And add this library code in your CakePHP template layout in
2. Wrap your listings and pagination links in div tag apply id="wrapper".
3. add this function in common javascript code which must be load in page end before end of body tag

Add Below Code in Javascript

function ajaxPageLoader(request_url) {
        console.log("Content loading from : "+request_url);
        $("#wrapper").load(request_url + " #wrapper", function() {
            window.history.pushState({}, "", request_url);
            console.log("Content loaded");
        });
    }
$(document).ready(function(){
       $('your_pagination_link_selector').livequery(function() {
            $(this).unbind('click').bind('click', function(e) {
                e.preventDefault();
                ajaxPageLoader($(this).attr('href'));
                return false;
            })
       });
    });

Answer 2

For those who want a complete and done-for-use Ajax Pagination, I've created this Extended Helper:

https://gist.github.com/celsowm/48227eb6c3d49648e435dcb46d1adf48

You just need to

• change your common submit for $this->AjaxPaginator->submit
• set both FormId and DivResponse
• Create a new action to get all queryData and do the query

Answer 3

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>