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

下载

并在
在div标签中包含您的商家信息和分页链接 id =“wrapper”。
在必须加载的常用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

您只需要

将您的普通提交更改为ViewComponent
同时设置FormId和DivResponse
创建一个新操作以获取所有queryData并执行查询

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>

Cakephp 3：Ajax分页

3 个答案: