CakePHP Ajax 分页

Question

我目前正在尝试实现一个ajax分页列表。我觉得我离成功很近了。当我点击“上一页”、“下一页”或单个页面数字时，会显示正确的结果，但是div.postsPaging会加载带有Cake的default.ctp布局的头和尾的分页结果。我尝试在displayPosts视图或displayPosts操作中将布局设置为ajax，但是默认布局根本不会出现（无论是在内部还是外部的div中）。

我的问题是，如何仅使用分页结果而不包括布局中的头、尾或其他任何内容来加载postsPaging div？如何使ajax请求的结果不包含默认布局的头和尾？

附：绑定在其中一页索引和下一页按钮上的jQuery事件如下：

$("#link-196981051").bind("click", function (event) {$.ajax({dataType:"html", success:function (data, textStatus) {$("#postsPaging").html(data);}, url:"\/AuthAdminCakeApp\/posts\/displayPosts\/page:2"});
return false;});`

$("#link-296431922").bind("click", function (event) {$.ajax({dataType:"html", success:function (data, textStatus) {$("#postsPaging").html(data);}, url:"\/AuthAdminCakeApp\/posts\/displayPosts\/page:2"});
return false;});`

我的PostsController代码如下：

class PostsController extends AppController {

public $helpers = array('Js' => 'Jquery');    
public $paginate = array(
    'limit' => 3,
    'order' => array(
        'Post.title' => 'asc'
   )
);

public function displayPosts() {
    $this->set('posts', $this->paginate());
}

// other actions
}

我的分页元素（paging.ctp）如下：

<?php
$this->Paginator->options(
        array('update'=>'#postsPaging',
                'url'=>array('controller'=>'posts', 
'action'=>'displayPosts')));
?>
<table cellpadding="0" cellspacing="0">
<tr>
    <th><?php echo $this->Paginator->sort('id'); ?></th>
    <th><?php echo $this->Paginator->sort('user_id'); ?></th>
    <th><?php echo $this->Paginator->sort('title'); ?></th>
    <th><?php echo $this->Paginator->sort('body'); ?></th>
    <th><?php echo $this->Paginator->sort('created'); ?></th>
    <th><?php echo $this->Paginator->sort('modified'); ?></th>
    <th class="actions"><?php echo __('Actions'); ?></th>
</tr>

<?php
foreach ($posts as $post): ?>
<tr>
    <td><?php echo h($post['Post']['id']); ?>&nbsp;</td>
    <td>
        <?php echo $this->Html->link($post['User']['id'],     array('controller' => 'users', 'action' => 'view', $post['User']['id'])); ?>
    </td>
    <td><?php echo h($post['Post']['title']); ?>&nbsp;</td>
    <td><?php echo h($post['Post']['body']); ?>&nbsp;</td>
    <td><?php echo h($post['Post']['created']); ?>&nbsp;</td>
    <td><?php echo h($post['Post']['modified']); ?>&nbsp;</td>

    <td class="actions">
        <?php echo $this->Html->link(__('View'), array('action' => 'view', $post['Post']['id'])); ?>
        <?php echo $this->Html->link(__('Edit'), array('action' => 'edit', $post['Post']['id'])); ?>
        <?php echo $this->Form->postLink(__('Delete'), array('action' => 'delete', $post['Post']['id']), null, __('Are you sure you want to delete # %s?', $post['Post']['id'])); ?>
    </td>
</tr>
<?php endforeach;  ?>
</table>
<?php
echo $this->Paginator->prev('< ' . __('previous'), array(), null, array('class' => 'prev disabled'));
echo $this->Paginator->numbers(array('separator' => ''));
echo $this->Paginator->next(__('next') . ' >', array(), null, array('class' => 'next disabled'));
?>

显示文章的视图如下所示：

<div id="postsPaging">
<?php echo $this->element('Posts/paging'); ?>
</div>

编辑：我正在使用CakePHP 2.2.5。

- user1927371

Answer 1

你需要使用Ajax布局。

$this->layout = ($this->request->is("ajax")) ? "ajax" : "default";

您可以将此代码片段放置在AppController中，以便在整个应用程序中使用Ajax响应。

public function beforeRender() {
    $this->layout = ($this->request->is("ajax")) ? "ajax" : "default";
}

- Kishor Kundan

---

谢谢 :) 我把布局更改放在了错误的文件中，而且没有加条件语句。 - user1927371

另外一件事：我发现在点击“下一页”或“第二页”后，“上一页”和“第一页”按钮没有生成新的绑定事件。只有原始的绑定事件存在。Paginator选项数组不应该为我完成这个吗？ - user1927371

请查看以下链接：http://stackoverflow.com/questions/9328621/ajax-paging-sorting-in-cakephp-2-0 和 http://book.cakephp.org/2.0/en/core-libraries/helpers/js.html#ajax-pagination - Kishor Kundan

请跟随这些链接，您将不会错过任何内容。echo $this->Js->writeBuffer(); - Kishor Kundan

我在默认视图中调用了writeBuffer。 - user1927371

OK，问题解决了：你说的关于回显 $this->Js->writeBuffer(); 是正确的。我已经在 default.ctp 中添加了它，但是忘记在我的 ajax 布局中添加它了。在这里找到了解决方案：http://stackoverflow.com/questions/9075727/cakephp-2-0-and-ajax-link-inside-ajax-loaded-content。谢谢。 - user1927371

Answer 2

同时确保您正在加载RequestHandler组件。

var $components = array('RequestHandler');

将上述代码放入您的控制器(Controller)或应用控制器(AppController)中，会处理设置布局为ajax。

- Chris