Cakephp 3: Ajax分页

Question

我试着在cakephp 3中进行ajax分页。我添加了一个简单的jquery代码来进行jquery分页，但我知道这不是实际的解决方案。下面是我尝试过的代码

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

如何发送ajax请求进行分页并仅获取视图页面中的内容？

我需要两个选项的帮助: 1)什么是ajax请求(路径/页码)？2)什么是内容获取的控制器方法？

Answer 1

简单地说，您可以使用liveQuery Javascript库。您可以从here下载

1. 并将此库代码添加到CakePHP
2. 中的CakePHP模板布局中将清单和分页链接换行到

标记中将此函数应用于通用javascript代码中，该代码必须在页末加载后才能使用正文结束标记

在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

对于那些想要一个完整的、完全可用的Ajax分页的人，我创建了这个扩展的Helper：

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

你只需要

change for >更改FormId和$this->AjaxPaginator->submit

• set的通用提交新操作以获取所有FormId并执行

Answer 3

嗨，我在互联网上找到了这个例子，如果它能帮助你的话。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;
    });

然后必须在包含的分页元素的父div中添加“ajax- pagination”类。

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

我的pagining_links.ctp代码如下：

<?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";
?>

每当用户单击分页链接时，我们都会发出ajax请求以获取内容，并在其div的父目录中用请求的内容替换现有内容。参考我的完整视图文件代码(基于Ajax的分页和排序)

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