[Résolu] JQuery et le plugin "pagination"

Bonjour,

J'ai tenté en vain d'utiliser le plug in "pagination" de jQuery.
J'ai tenté d'adapter les codes fournis dans la demo en ligne et dans le zip mais impossible de le faire fonctionner.

Voici ce que j'ai dans les balises scripts :

	//-------------------------------------------------------------------------------------------
			function pageselectCallback(page_index, jq){
                var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
                $('#Searchresult').empty().append(new_content);
                return false;
            }
	//-------------------------------------------------------------------------------------------
            function initPagination() {
                var num_entries = $('#hiddenresult div.result').length;
                // Create pagination element
                $("#Pagination").pagination(num_entries, {
                    num_edge_entries: 2,
                    num_display_entries: 3,
                    callback: pageselectCallback,
                    items_per_page:1
                });
             }

et voici mes divs :

<div id="Pagination"></div>
<div id="Searchresult">This content will be replaced when pagination inits.</div>
<div id="hiddenresult" style="display:none;">
<?php admMontrerGalerie($database_test, $test); ?>
</div>

Seul "This content will be replaced when pagination inits." reste affiché, pas de pagination et des erreurs jQuery dans la console firebug :

jQuery is not defined
[Break on this error] jQuery.fn.pagination = function(maxentries, opts){\n

J'ai beau vouloir tenter de l'initialiser par : $(document).ready(function(){ autour de la fonction initPagination mais le problème persiste.

Pourriez-vous m'éclairer ?
Merci d'avance.

Sébastien
Modifié par Sebastien_91 (30 Jul 2009 - 11:48)

Personne n'a d'idée ?
Au pire un autre système de pagination alors ?

Résolution partielle du problème.
Désormais la pagination se fait mais pas correctement :

Ma fonction qui charge tous les resultats de ma base dans la div #hiddenresults est :

function admMontrerGalerie($database_test, $test)
{
	mysql_select_db($database_test, $test);
	$query_R = "SELECT * FROM novart_tableaux ORDER BY `ordre` DESC";
	$R = mysql_query($query_R, $test) or die(mysql_error());
	$row_R = mysql_fetch_assoc($R);
	$totalRows_R = mysql_num_rows($R);
	do { 
		echo '<div class="result">';
		echo 'Nom : '.$row_R['nom'].' <br>';
		echo 'Auteur : '.$row_R['auteurnom'].' '.$row_R['auteurprenom'].'<br>';
		echo 'Description : '.nl2br($row_R['description']).'<br>';
		echo 'Année : '.$row_R['annee'].'<br>';
		echo '<img src="'.$row_R['img_p'].'"><br>';
		echo '-----------------------------<br>';
		echo '</div>';
	} while ($row_R = mysql_fetch_assoc($R)); 	

}

J'ai 6 enregistrements dans ma table SQL.
Mais dans les options de pagination si je mets items_per_page: 1 j'ai bien un resultat par page, mais si je mets items_per_page: 2 j'ai bien 3 pages dans lesquelles naviguer, et si je mets items_per_page: 3 j'ai bien 2 pages dans lesquelles naviguer.
Le soucis est que si je mets items_per_page: 2 ou items_per_page: 2 j'ai bien les liens de pagination qui se font correctement, mais sur chacune des pages je n'ai QU'UN SEUL enregistrement qui s'affiche !
Le soucis vient-il de ma fonction qui interrige ma BDD ?

Peut-être car $row_R est déclaré deux fois ? (ligne 6 et dans le do/while)

De plus je ne sais pas si tu as besoin de $total_rows_R, enfin je n'ai jamais utilisé le plugin pagination donc bon. À part ça la requête SQL devrait être bonne mais peut-être qu'à long terme, si tu ajoutes beaucoup d'entrées, ça ne sera pas top (trop d'informations non nécessaires sont sélectionnées pour rien, enfin tu verras ça plus tard en cas).
Un seul petit truc, je pense que ça serait plus intéressant d'utiliser <hr/> plutôt que ------<br/> (ça se modifie très rapidement grâce à quelques lignes de CSS)

Sebastien_91 a écrit :
items_per_page: 2 ou items_per_page: 2

3 ?
Modifié par kurt11 (26 Jul 2009 - 20:20)

kurt11 a écrit :
Peut-être car $row_R est déclaré deux fois ? (ligne 6 et dans le do/while)

Le soucis c'est que je ne sais pas comment faire ma boucle différemment
, peut-être as-tu une idée ?
De plus je ne comprends techniquement pas pourquoi le code jQuery ne sélectionne qu'un seul passage de boucle (donc une seule div result alors que je lui en demande 2, ou plus ).

j'ai supprimé également $total_rows_R, effectivement je réutilise mes morceaux de code et j'avoue que je code un peu salement parfois ! (je suis totalement autodidacte, même si ça n'excuse rien)

Merci de m'accorder un peu de ton temps, c'est très gentil !
Modifié par Sebastien_91 (26 Jul 2009 - 21:46)

Pour les boucles, je te conseilles de lire ça si tu veux en apprendre un peu plus, http://fr3.php.net/manual/fr/control-structures.while.php (ainsi que les 3 autres pages en dessous du while dans le menu (do-while, for, foreach)). La manière dont tu fais ta boucle est bonne, normalement il ne devrait pas y avoir de souci de ce côté là.
D'ailleurs vu que tu es auto-didacte je te conseille vivement de lire php.net si ce n'est pas déjà fait, c'est de la documentation pure donc c'est un peu difficile au début, mais on y trouve beaucoup de choses.

En me penchant un peu plus longuement sur le code, je crois bien avoir trouvé. En fait dans la fonction pageselectCallback(), #SearchResults est vidé avant d'ajouter un résultat, du coup on a que le dernier résultat dans la page.
Je pense qu'il faudrait supprimer le .empty()

$('#Searchresult')[b].empty()[/b].append(new_content);

Pas de souci pour l'aide

L'empty ne résoud rien car si je le supprime, lorsque je navigue, ça "append" la page suivante dans la div (et puis ca n'"append" qu'un seul élément encore une fois ... )

Ok, dans ces cas là.

function handlePaginationClick(new_page_index, pagination_container) {
        // This selects 20 elements from a content array
        for(var i=new_page_id;i<;i++) {
            $('#MyContentArea').append(content[i]);
        }
        return false;
    }

Trouvé dans la doc : http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/README

Ça devrait donner quelque chose comme ça

function pageselectCallback(page_index, item_per_page, jq){
  var item_index = page_index*item_per_page;
  $('#Searchresult').empty();
  for(var i=item_index;i<item_index+item_per_page;i++) {
    var new_content = $('#hiddenresult div.result:eq('+item_index+')').clone();
    $('#Searchresult').append(new_content);
  } 
  return false; 
}

Comme dit précédemment je n'ai jamais utilisé ce plugin donc c'est un peu approximatif comme code.[/i]

Merci mais ça ne fonctionne toujours pas, l'initialisation de la pagination ne fonctionne toujours pas ...

Arf, je ne vois pas alors

En cas si ta page est en ligne envoie moi l'adresse en MP si tu veux, je regarderai ça dès que j'ai un peu de temps.

C'est envoyé, merci

Voilà, j'ai passé un peu de temps ce matin là-dessus et ça fonctionne.

À la place de la fonction pageselectCallback, il faut mettre

var items_per_page = 2;
var num_display_entries = 6;
      
function pageselectCallback(page_index, jq){
  $('#Searchresult').empty();
  start_item_index = page_index * items_per_page;
  for(i = start_item_index; i < start_item_index + items_per_page; ++i) {
    var new_content = $('#hiddenresult div.result:eq('+i+')').clone();
    $('#Searchresult').append(new_content);
  }
  return false;
}

J'ai dû définir item_per_page et num_display_entries pour les utiliser dans pageselectCallback(), tu peux les renommer et les utiliser aussi dans initialisation() afin de ne changer ces valeurs qu'une fois.

Si tu as des questions sur le code pas de souci

Lerci énormément, ça fonctionne niquel !

Voici l'entièreté du code arrangé, donc :

			var items_per_page = 3; 
			var num_display_entries = 6; 
       
			function pageselectCallback(page_index, jq){ 
			  $('#Searchresult').empty(); 
			  start_item_index = page_index * items_per_page; 
			  for(i = start_item_index; i < start_item_index + items_per_page; ++i) { 
				var new_content = $('#hiddenresult div.result:eq('+i+')').clone(); 
				$('#Searchresult').append(new_content); 
			  } 
			  return false; 
			} 
            /* 
             Callback function for the AJAX content loader.
             */
            function initPagination() {
                var num_entries = $('#hiddenresult div.result').length;
                // Create pagination element
                $("#pagination").pagination(num_entries, {
                    num_edge_entries: 0,
                    num_display_entries: num_display_entries,
                    callback: pageselectCallback,
                    items_per_page: items_per_page
                });
             }
                    
            /* Initialisation de la pagination */
            $(document).ready(function(){      
                initPagination();
            });

Et ça marche du tonnerre !
Merci de m'avoir aidé sur ce coup, ça me permet d'aller plus loin dans le site désormais