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. 将列表和分页链接包装在 div 标签中应用 id="wrapper"。
3. 在必须加载的普通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 分页的人，我创建了这个扩展助手：

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

你只需要

• 将您的共同提交更改为$this->AjaxPaginator->submit
• 同时设置 FormId 和 DivResponse
• 创建一个新操作以获取所有 queryData 并执行查询

Answer 3

您好，我在互联网上找到了这个示例，如果它可以帮助您。 here

阿贾克斯：

$('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>