Jquery CakePHP3创建Ajax分页/排序
我一直在四处寻找，但很难找到任何例子。我已经在我的应用程序中添加了分页功能，但是我想让它成为一个Ajax/异步功能，这样就不会重新加载整个页面。有人有关于这方面最佳实践的示例/教程吗？以下是我已有的代码： 控制器：Jquery CakePHP3创建Ajax分页/排序,jquery,ajax,cakephp,Jquery,Ajax,Cakephp,我一直在四处寻找，但很难找到任何例子。我已经在我的应用程序中添加了分页功能，但是我想让它成为一个Ajax/异步功能，这样就不会重新加载整个页面。有人有关于这方面最佳实践的示例/教程吗？以下是我已有的代码： 控制器： public $acronym_paginate = [ 'limit' => 25, 'fields' => ['id','abbreviation', 'full_text'], 'order' => [
public $acronym_paginate = [
'limit' => 25,
'fields' => ['id','abbreviation', 'full_text'],
'order' => [
'Acronyms.abbreviation' => 'asc'
]
];
public function initialize() {
parent::initialize();
$this->loadComponent('RequestHandler');
$this->loadComponent("Flash");
}
public function index() {
$this->loadModel('Acronyms');
$acronyms = $this->Acronyms->find('All')->where();
$this->set([
'acronyms' => $this->paginate($acronyms),
'_serialize' => ['acronyms']
]);
}
}
<table class = "acronymTable" id = "acronymTable" name = "acronymTable" >
<thead>
<tr>
<td style="display:none;">
ID
</td>
<td width = "10%" style="border:1px solid black; font-weight: bold; padding:10px;">
Acronym
</td>
<td width = "60%" style = "border:1px solid black; font-weight: bold; padding:10px;">
Definition
</td>
</tr>
</thead>
<tbody>
<?php foreach ($acronyms as $acronym): ?>
<tr id = "<?= $acronym->id ?>" name = "<?= $acronym->id ?>">
<td style="display:none;"><?= $acronym->id ?></td>
<td style="padding-left:10px;" id="acronymName-<?= $acronym->id ?>" name="acronymName-<?= $acronym->id ?>" ><?= $acronym->abbreviation ?></td>
<td style="padding-left:10px;" id="acronymDef-<?= $acronym->id ?>" name="acronymDef-<?= $acronym->id ?>"><?= $acronym->full_text ?></td>
</tr>
<?php endforeach; ?>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: center;">
<div class="pagination pagination-large">
<ul class="pagination">
<?php
echo $this->Paginator->prev(__('prev'), array('tag' => 'li'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
echo $this->Paginator->numbers(array('separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li','first' => 1));
echo $this->Paginator->next(__('next'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
?>
</ul>
</div>
</td>
</tr>
</tfoot>
</table>
public $acronym_paginate = [
'limit' => 25,
'fields' => ['id','abbreviation', 'full_text'],
'order' => [
'Acronyms.abbreviation' => 'asc'
]
];
public function initialize() {
parent::initialize();
$this->loadComponent('RequestHandler');
$this->loadComponent("Flash");
}
public function index() {
$this->loadModel('Acronyms');
$acronyms = $this->Acronyms->find('All')->where();
$this->set([
'acronyms' => $this->paginate($acronyms),
'_serialize' => ['acronyms']
]);
}
}
<table class = "acronymTable" id = "acronymTable" name = "acronymTable" >
<thead>
<tr>
<td style="display:none;">
ID
</td>
<td width = "10%" style="border:1px solid black; font-weight: bold; padding:10px;">
Acronym
</td>
<td width = "60%" style = "border:1px solid black; font-weight: bold; padding:10px;">
Definition
</td>
</tr>
</thead>
<tbody>
<?php foreach ($acronyms as $acronym): ?>
<tr id = "<?= $acronym->id ?>" name = "<?= $acronym->id ?>">
<td style="display:none;"><?= $acronym->id ?></td>
<td style="padding-left:10px;" id="acronymName-<?= $acronym->id ?>" name="acronymName-<?= $acronym->id ?>" ><?= $acronym->abbreviation ?></td>
<td style="padding-left:10px;" id="acronymDef-<?= $acronym->id ?>" name="acronymDef-<?= $acronym->id ?>"><?= $acronym->full_text ?></td>
</tr>
<?php endforeach; ?>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: center;">
<div class="pagination pagination-large">
<ul class="pagination">
<?php
echo $this->Paginator->prev(__('prev'), array('tag' => 'li'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
echo $this->Paginator->numbers(array('separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li','first' => 1));
echo $this->Paginator->next(__('next'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
?>
</ul>
</div>
</td>
</tr>
</tfoot>
</table>
身份证件
缩略语
定义
由于分页的状态随着每个请求而改变，上一个/下一个链接可能会变为非活动/活动，数字可能会被截断/释放，因此我建议在Ajax请求中也呈现分页
将可重放的输出移动到元素
以保留
/src/Template/Element/Acronyms/list.ctp
<?php foreach ($acronyms as $acronym): ?>
<tr id = "<?= $acronym->id ?>" name = "<?= $acronym->id ?>">
<td style="display:none;"><?= $acronym->id ?></td>
<td style="padding-left:10px;" id="acronymName-<?= $acronym->id ?>" name="acronymName-<?= $acronym->id ?>" ><?= $acronym->abbreviation ?></td>
<td style="padding-left:10px;" id="acronymDef-<?= $acronym->id ?>" name="acronymDef-<?= $acronym->id ?>"><?= $acronym->full_text ?></td>
</tr>
<?php endforeach; ?>
<div class="pagination pagination-large">
<ul class="pagination">
<?php
echo $this->Paginator->prev(__('prev'), array('tag' => 'li'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
echo $this->Paginator->numbers(array('separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li','first' => 1));
echo $this->Paginator->next(__('next'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
?>
</ul>
</div>
<table id="list">
<?= $this->element('Acronyms/list', ['acronyms' => $acronyms]) ?>
</table>
<div id="pagination">
<?= $this->element('Acronyms/pagination') ?>
</div>
public function index() {
$this->loadModel('Acronyms');
$acronyms = $this->Acronyms->find('All')->where();
$this->set([
'acronyms' => $this->paginate($acronyms),
'_serialize' => ['acronyms']
]);
// render our View for Ajax requests
if ($this->request->is('ajax')) {
$this->render('ajax/index');
}
}
在索引
方法上为Ajax请求创建一个视图
/src/Template/Acronyms/ajax/index.ctp
<?php foreach ($acronyms as $acronym): ?>
<tr id = "<?= $acronym->id ?>" name = "<?= $acronym->id ?>">
<td style="display:none;"><?= $acronym->id ?></td>
<td style="padding-left:10px;" id="acronymName-<?= $acronym->id ?>" name="acronymName-<?= $acronym->id ?>" ><?= $acronym->abbreviation ?></td>
<td style="padding-left:10px;" id="acronymDef-<?= $acronym->id ?>" name="acronymDef-<?= $acronym->id ?>"><?= $acronym->full_text ?></td>
</tr>
<?php endforeach; ?>
<div class="pagination pagination-large">
<ul class="pagination">
<?php
echo $this->Paginator->prev(__('prev'), array('tag' => 'li'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
echo $this->Paginator->numbers(array('separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li','first' => 1));
echo $this->Paginator->next(__('next'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
?>
</ul>
</div>
<table id="list">
<?= $this->element('Acronyms/list', ['acronyms' => $acronyms]) ?>
</table>
<div id="pagination">
<?= $this->element('Acronyms/pagination') ?>
</div>
public function index() {
$this->loadModel('Acronyms');
$acronyms = $this->Acronyms->find('All')->where();
$this->set([
'acronyms' => $this->paginate($acronyms),
'_serialize' => ['acronyms']
]);
// render our View for Ajax requests
if ($this->request->is('ajax')) {
$this->render('ajax/index');
}
}
最后，在分页链接上侦听单击事件并替换内容
jQuery
$(document).on('click', '.pagination a', function(e) {
e.preventDefault();
var $link = $(this);
if (!$('body').hasClass('loading')) {
$('body').addClass('loading');
$.ajax({
url: $link.attr('href')
}).done(function(html) {
var $html;
// grab Ajax response into jQuery object
$html = $(html);
// replace table body content with new <tr> elements
$('#acronymTable tbody').html($html.find('#list').html());
// replace pagination
$('#acronymTable .pagination').replaceWith($html.find('#pagination').children());
$('body').removeClass('loading');
}).fail(function() {
// if Ajax request fails fall back to just loading the target page
window.location.href = $link.attr('href');
});
}
});
$（文档）。在（'单击'，'上。分页a'，函数（e）{
e、 预防默认值（）；
var$link=$（此）；
if（！$（'body'）.hasClass（'loading'））{
$（'body'）.addClass（'loading'）；
$.ajax（{
url:$link.attr（'href'）
}).done（函数（html）{
var$html；
//将Ajax响应抓取到jQuery对象中
$html=$（html）；
//用新元素替换表体内容
$（'#缩写tbody'）.html（$html.find（'#list'）.html（））；
//替换分页
$（'#acronymTable.pagination'）.replaceWith（$html.find（'#pagination'）.children（））；
$（'body'）.removeClass（'loading'）；
}).fail（函数（）{
//如果Ajax请求失败，则返回到仅加载目标页面
window.location.href=$link.attr（'href'）；
});
}
});
由于分页的状态会随着每个请求而改变，上一个/下一个链接可能会变为非活动/活动，数字可能会被截断/释放，因此我建议在Ajax请求中也呈现分页
将可重放的输出移动到元素
以保留
/src/Template/Element/Acronyms/list.ctp
<?php foreach ($acronyms as $acronym): ?>
<tr id = "<?= $acronym->id ?>" name = "<?= $acronym->id ?>">
<td style="display:none;"><?= $acronym->id ?></td>
<td style="padding-left:10px;" id="acronymName-<?= $acronym->id ?>" name="acronymName-<?= $acronym->id ?>" ><?= $acronym->abbreviation ?></td>
<td style="padding-left:10px;" id="acronymDef-<?= $acronym->id ?>" name="acronymDef-<?= $acronym->id ?>"><?= $acronym->full_text ?></td>
</tr>
<?php endforeach; ?>
<div class="pagination pagination-large">
<ul class="pagination">
<?php
echo $this->Paginator->prev(__('prev'), array('tag' => 'li'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
echo $this->Paginator->numbers(array('separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li','first' => 1));
echo $this->Paginator->next(__('next'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
?>
</ul>
</div>
<table id="list">
<?= $this->element('Acronyms/list', ['acronyms' => $acronyms]) ?>
</table>
<div id="pagination">
<?= $this->element('Acronyms/pagination') ?>
</div>
public function index() {
$this->loadModel('Acronyms');
$acronyms = $this->Acronyms->find('All')->where();
$this->set([
'acronyms' => $this->paginate($acronyms),
'_serialize' => ['acronyms']
]);
// render our View for Ajax requests
if ($this->request->is('ajax')) {
$this->render('ajax/index');
}
}
在索引
方法上为Ajax请求创建一个视图
/src/Template/Acronyms/ajax/index.ctp
<?php foreach ($acronyms as $acronym): ?>
<tr id = "<?= $acronym->id ?>" name = "<?= $acronym->id ?>">
<td style="display:none;"><?= $acronym->id ?></td>
<td style="padding-left:10px;" id="acronymName-<?= $acronym->id ?>" name="acronymName-<?= $acronym->id ?>" ><?= $acronym->abbreviation ?></td>
<td style="padding-left:10px;" id="acronymDef-<?= $acronym->id ?>" name="acronymDef-<?= $acronym->id ?>"><?= $acronym->full_text ?></td>
</tr>
<?php endforeach; ?>
<div class="pagination pagination-large">
<ul class="pagination">
<?php
echo $this->Paginator->prev(__('prev'), array('tag' => 'li'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
echo $this->Paginator->numbers(array('separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li','first' => 1));
echo $this->Paginator->next(__('next'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
?>
</ul>
</div>
<table id="list">
<?= $this->element('Acronyms/list', ['acronyms' => $acronyms]) ?>
</table>
<div id="pagination">
<?= $this->element('Acronyms/pagination') ?>
</div>
public function index() {
$this->loadModel('Acronyms');
$acronyms = $this->Acronyms->find('All')->where();
$this->set([
'acronyms' => $this->paginate($acronyms),
'_serialize' => ['acronyms']
]);
// render our View for Ajax requests
if ($this->request->is('ajax')) {
$this->render('ajax/index');
}
}
最后，在分页链接上侦听单击事件并替换内容
jQuery
$(document).on('click', '.pagination a', function(e) {
e.preventDefault();
var $link = $(this);
if (!$('body').hasClass('loading')) {
$('body').addClass('loading');
$.ajax({
url: $link.attr('href')
}).done(function(html) {
var $html;
// grab Ajax response into jQuery object
$html = $(html);
// replace table body content with new <tr> elements
$('#acronymTable tbody').html($html.find('#list').html());
// replace pagination
$('#acronymTable .pagination').replaceWith($html.find('#pagination').children());
$('body').removeClass('loading');
}).fail(function() {
// if Ajax request fails fall back to just loading the target page
window.location.href = $link.attr('href');
});
}
});
$（文档）。在（'单击'，'上。分页a'，函数（e）{
e、 预防默认值（）；
var$link=$（此）；
if（！$（'body'）.hasClass（'loading'））{
$（'body'）.addClass（'loading'）；
$.ajax（{
url:$link.attr（'href'）
}).done（函数（html）{
var$html；
//将Ajax响应抓取到jQuery对象中
$html=$（html）；
//用新元素替换表体内容
$（'#缩写tbody'）.html（$html.find（'#list'）.html（））；
//替换分页
$（'#acronymTable.pagination'）.replaceWith（$html.find（'#pagination'）.children（））；
$（'body'）.removeClass（'loading'）；
}).fail（函数（）{
//如果Ajax请求失败，则返回到仅加载目标页面
window.location.href=$link.attr（'href'）；
});
}
});
我已经在cake3应用程序中完成了这项工作，但我没有教程或类似的内容。我可以稍微描述一下。我在paginator链接中添加了一个单击事件，并使用generetated href链接进行ajax请求。然后，我将div的内容（在您的例子中是一个表）替换为从ajax请求中获得的html。但是您必须自己调整paginator元素的活动类。我希望这能引导你走上正确的方向。你也可以在上查看一个非常简单的示例-它表明你可以使它变得清晰，并且在JS因某种原因无法工作的情况下包含一个非JS回退：）我在我的cake3应用程序中做过这件事，但我没有教程或类似的东西。我可以稍微描述一下。我在paginator链接中添加了一个单击事件，并使用generetated href链接进行ajax请求。然后，我将div的内容（在您的例子中是一个表）替换为从ajax请求中获得的html。但是您必须自己调整paginator元素的活动类。我希望这能引导你走向正确的方向。你也可以在上查看一个非常简单的示例-它表明你可以使它变得清晰，并且在JS因某种原因无法工作的情况下包含一个非JS回退：）谢谢，这非常有帮助+1对于细节和彻底性的关注！谢谢，这非常有帮助+1对于细节和彻底性的关注！