La pagination CakePHP dans une page chargée par l'ajax

Par lynxfg, il y a 11 ans


Bonjour tout le monde,
Je viens d'apprendre à développer par le CakePhp grâce au tutos Grafikart.
Je réalise une mini application e-commerce, j'ai pu développé un moteur de filtre des produits avec AJAX selon (Ville, Catégorie, prix, partenaire).
le résultat de la recherche (filtre) est chargé via ajax, mon problème c'est que je ne sais pas comment faire la pagination CekePHP pour cette liste des produits chargées d'une manière asynchrone.
ci dessous mon code (Contrôleur , vue):

ProductsController :
[code]
<?php

App::uses('AppController', 'Controller');

class ProductsController extends AppController {

/*

/*

}

[/code]

home.ctp :
[code]
<h2>Filtrer les produits</h2>
<?php
echo $this->Form->create('Product', array(
'url' => array('controller' => 'products', 'action' => 'ajax_search'))
);
?>
<?php
echo $this->Form->input('city_id', array(
'type' => 'select',
'label' => '',
'id' => 'city-id',
'empty' => 'Ou ?',
));
?>
<?php
echo $this->Form->input('marque_id', array(
'type' => 'select',
'label' => '',
'id' => 'marque-id',
'empty' => 'Quoi ?',
));
?>

<?php
echo $this->Form->input('price_id', array(
'type' => 'select',
'label' => '',
'id' => 'price-id',
'empty' => 'Combien ?',
));
?>

<?php
echo $this->Form->input('prix', array(
'type' => 'select',
'label' => '',
'options' => array(1 => "-200 dh", 2 => "200 à 500 dh", 3 => "+500 dh"),
'empty' => '(choisissez)'
));
?>

<?php
echo $this->Form->input('partner_id', array(
'type' => 'select',
'label' => '',
'id' => 'partner-id',
'empty' => 'Qui ?',
));
?>

<?php //echo this->Form->submit('Valider'); ?> <?php echo $this->Form->end(); ?> <?php /* ############################## partie ajax ################################## */ ?> <div id="product-container"> <div id="filters"></div> <div id="product-content"> <table> <?php if (!empty(result)) {
foreach ($result as $k => $v) {
?>
<tr>
<td>
<h3><b><?php echo $v['Product']['name']; ?></b></h3>
<p><?php echo $v['Product']['description']; ?></p>
<strong><?php echo $v['Partner']['name']; ?></strong>|
<i><?php echo $v['Marque']['name']; ?></i>|
<tt>ville :<?php echo $v['City']['name']; ?></tt>|
<strong><?php echo $v['Product']['prix']; ?></strong>
</td>
</tr>
<?php
}
} else {
echo "Aucun résultat trouvé";
}
?>
</table>

</div>

</div>

<script type="text/javascript">
$(document).ready(function() {
var Ville = '';
var Marque = '';
var Price = '';
var Prix = '';
var Partner = '';
var POST;
$("#city-id").bind('change', function(e) {
e.preventDefault();

        Ville = $(this).find("option:selected").attr('value');

        $("#product-container").slideUp('slow');
        $("#product-container #filters").find(".city").remove();

        if ($(this).find("option:selected").text() !== "Ou ?") {
            $("#product-container #filters").append("<span class='filter-item city'>" + $(this).find("option:selected").text() + "</span>");
        }

        go();
    })

    $("#price-id").bind('change', function(e) {
        e.preventDefault();

        Price = $(this).find("option:selected").attr('value');

        $("#product-container").slideUp('slow');
        $("#product-container #filters").find(".price").remove();
        if ($(this).find("option:selected").text() !== "Combien ?") {
            $("#product-container #filters").append("<span class='filter-item price'>" + $(this).find("option:selected").text() + "</span>");
        }

        go();
    })

    $("#ProductPrix").bind('change', function(e) {
        e.preventDefault();

        Prix = $(this).find("option:selected").attr('value');

        $("#product-container").slideUp('slow');
        $("#product-container #filters").find(".price").remove();
        if ($(this).find("option:selected").text() !== "Combien ?") {
            $("#product-container #filters").append("<span class='filter-item prix'>" + $(this).find("option:selected").text() + "</span>");
        }

        go();
    })

    $("#partner-id").bind('change', function(e) {
        e.preventDefault();

        Partner = $(this).find("option:selected").attr('value');

        $("#product-container").slideUp('slow');
        $("#product-container #filters").find(".partner").remove();
        if ($(this).find("option:selected").text() !== "Qui ?") {
            $("#product-container #filters").append("<span class='filter-item partner'>" + $(this).find("option:selected").text() + "</span>");
        }

        go();
    })

    $("#marque-id").bind('change', function(e) {
        e.preventDefault();

        Marque = $(this).find("option:selected").attr('value');

        $("#product-container").slideUp('slow');
        $("#product-container #filters").find(".marque").remove();

        if ($(this).find("option:selected").text() !== "Quoi ?") {
            $("#product-container #filters").append("<span class='filter-item marque'>" + $(this).find("option:selected").text() + "</span>");
        }

        go();
    })
    function go() {

        POST = {Product: {city_id: Ville, marque_id: Marque, price_id: Price, partner_id: Partner, prix: Prix}};
        $.ajax({
            type: 'POST',
            url: 'products/ajax_search',
            data: POST,
            success: function(data) {
                $("#product-container ").slideDown('slow');
                $("#product-container #product-content").html(data);
            },
            error: function(data) {
                alert('An unexpected error has occurred!');

            }
        });

    }

});

</script>

[/code]

la vue ajax_search.ctp

[code]
<?php
// Code Pagination
this->Paginator->options(array( 'update' => '#listProductus', 'before' => $this->Js->get('#spinner')->effect('fadeIn', array('buffer' => false)), 'complete' => $this->Js->get('#spinner')->effect('fadeOut', array('buffer' => false)) )); ?> <div id ="listProductus" > <table> <?php if(!empty(result))
{
foreach ($result as $k => $v) {
?>
<tr>
<td>
<h3><b><?php echo $v['Product']['name'] ; ?></b></h3>
<p><?php echo $v['Product']['description'] ; ?></p>
<i><?php echo $v['Marque']['name'] ; ?></i>|
<tt><?php echo $v['City']['name'] ; ?></tt>|
<tt><?php echo $v['Product']['prix'] ; ?></tt>|
<tt><?php echo $v['Partner']['name'] ; ?></tt>
</td>
</tr>
<?php
}
}
else
{
echo "Aucun résultat trouvé";
}
?>
</table>
</div>
<?php echo $this->Paginator->prev(); ?> –       
<?php echo $this->Paginator->numbers(); ?>         
<?php echo $this->Paginator->next('Next Page'); ?>
<?php echo $this->Js->writeBuffer();?>
[/code]

Ici j'ai le filtre ajax qui fonctionne correctement, mais quand je clique sur une page de pagination ce message apparait :

[b]Notice (8): Undefined index: pageCount [CORE\Cake\View\Helper\PaginatorHelper.php, line 723][/b]

Merci de m'aider de trouver une solution.
Cordialement

Aucune réponse