cakephp分页ajax请求不起作用

时间:2017-06-21 07:59:08

标签: javascript php jquery ajax cakephp

我非常喜欢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']); ?>&nbsp;</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的内容时,结果如下。我认为这就是它在下拉列表中丢失事件的原因。 enter image description here

0 个答案:

没有答案