我非常喜欢cakephp ajax的分页。我正在处理一个大型项目,我需要一个带有ajax请求和页面分页的页面。那么让我解释一下我想要的东西。一方面,我想要一个ajax分页(效果非常好),但另一方面,我有一个选择 选项下拉列表,它会生成一个过滤器。每当我在下一个请求中单击此下拉列表时,它就会在更改时丢失该事件。此外,它还使用 #content-rooms 创建了一个新的div。请任何人帮助我,因为我已经失去了很多时间。
查看
<?php
$this->Paginator->options(array(
'update' => '#content-rooms',
'before' => $this->Js->get('#processing')->effect('fadeIn', array('buffer' => false)),
'complete' => $this->Js->get('#processing')->effect('fadeOut', array('buffer' => false)),
'url' => $this->passedArgs,
'data' => http_build_query($this->request->data),
'method' => 'POST',
'evalScripts' => true
));
$typeRoom = array(
'0' => 'Todos',
'1' => 'A',
'2' => 'B',
);
?>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><?php echo __('Rooms') ?></h1>
</div>
</div>
<?php
echo $this->Form->input('option_selected', array(
'type' => 'hidden',
'label' => false,
'value' => isset($type)?$type:"0",
));
?>
<div class="row">
<div class="col-lg-12">
<?php echo $this->Form->input('typeRoom', array('options' => $typeRoom, 'type' => 'select', 'label' => 'Room' , 'value'=> isset($type)?$type:"0" )); ?>
</div>
</div>
<div class="progress" id="processing" style="display: none;">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" style="width: 100%">
<span class="sr-only">100% Complete</span>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th><?php echo $this->Paginator->sort('idRoom', __('IdRoom')); ?></th>
<th><?php echo $this->Paginator->sort('name', __('name')); ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($rooms as $room): ?>
<tr>
<td><?php echo h($room['Room']['idRoom']); ?> </td>
<td>
<?php echo $this->Html->link($room['Sc']['name'], array('controller' => 'cat_scenes', 'action' => 'view', $room['Sc']['name'])); ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="paging col-lg-12">
<?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>
</div>
<div class="row">
<div class="col-lg-12">
<p>
<?php
echo $this->Paginator->counter(array(
'format' => __('Page {:page} of {:pages}, showing {:current} records out of {:count} total, starting on record {:start}, ending on {:end}')
));
?> </p>
</div>
</div>
<?php $this->Html->css('dataTables.responsive', array('inline' => false)) ?>
<?php $this->Html->script(array('jquery.dataTables.min', 'dataTables.responsive.js'), array('inline' => false)); ?>
<?php
echo $this->Html->scriptBlock(
"$(document).ready(function() {
$('#dataTables').DataTable({
responsive: true,
paginate: false,
info: false,
'sDom': 't',
'aaSorting': [],
'columnDefs': [
{'targets': [0,1,2,3,4,5,6,7,8,9,10,11,12,13] ,'orderable': false}
]
});
});", array('inline' => false));
?>
<?php echo $this->Html->script('rooms/index', array('inline' => false)); ?>
<?php echo $this->Js->writeBuffer(); ?>
Javascript(房间/索引)
$(document).ready(function(){
//send_post();
$('#typeRoom').change(send_post);
});
function send_post(){
console.log("send_post");
//alert($('#state').val());
$('#option_selected').val($('#typeRoom option:selected').val());
console.log("send_post ");
$.ajax({
url: '/Rooms/index',
data: 'type='+$('#option_selected').val(),
cache: false,
type: 'POST',
dataType: 'HTML',
success: function (data) {
console.log("on success");
console.log(data);
//$('#content').html(data);
$('#content-rooms').replaceAll();
$('#content-rooms').html(data);
//$.getScript("../js/rooms/index.js");
}
});
}
控制器
public function index() {
CakeLog::write('debug', __FILE__ . ' ' . __LINE__ . ' message: ' . json_encode($this->request->data));
$this->Room->recursive = 0;
if (isset($this->request->data['type']) && ($this->request->data['type'] != 0)) {
CakeLog::write('debug', __FILE__ . ' ' . __LINE__ . ' message: type: ' . json_encode($this->request->data['type']));
$options = array(
'conditions' => array(
'Room.idRoomType' => $this->request->data['type']
),
'limit' => 5,
'order' => array(
'Room.idRoom' => 'desc'
)
);
$this->set('type', $this->request->data['type']);
} else {
$options = array(
'limit' => 5,
'order' => array(
'Room.idRoom' => 'desc'
)
);
}
CakeLog::write('debug', __FILE__ . ' ' . __LINE__ . ' message: options: ' . json_encode($options));
$this->layout = ($this->request->is("ajax"))? "ajax": "default";
$this->Paginator->settings = $options;
$this->set('rooms', $this->Paginator->paginate());
}
当ajax请求加载具有 content-rooms 的重复ID的内容时,结果如下。我认为这就是它在下拉列表中丢失事件的原因。