[résolu] Bataille avec la pagination

aruhunoaruhuno Member
juillet 2014 modifié dans Entraide
Bonjour à tous !

Travaillant actuellement à la (re)création d'un de mes projets, je but sur un truc un peu bête : la pagination.
J'utilise la pagination intégrée à PluXML, qui marche très bien, mais j'aimerais avoir un rendu un peu plus sympa :
[list=*]
[*]à gauche : la flèche vers la première page et le lien "précédent"[/*]
[*]au milieu : la page courante avec le nombre de page[/*]
[*]à droite : le lien "suivante" et la flèche vers la dernière page[/*]
[/list]

Voilà le code, qui pour l'instant, me permet d'arriver plus ou moins à mes fins : 
[== CSS ==]
#pagination {
    height: 23px;
    margin: -6px 0 -17px 0;
    text-align:center;
}

#pagination a,
#pagination .p_first,
#pagination .p_prev,
#pagination .p_page,
#pagination .p_current,
#pagination .p_next,
#pagination .p_last {
	font-style: italic;
	font-size: 12px;
	color: white;
}

#pagination a:hover {
	color: #ff4e00;
}

#pagination .p_first, #pagination .p_prev {
	float: left;
}

#pagination .p_next, #pagination .p_last {
	float: right;
	margin-right: -65px;
}

#pagination .p_next {
	margin-right: 10px;
}

#pagination .p_prev, #pagination .p_next {
	padding: 0 5px;
}

Pourquoi plus ou moins ?
Simplement parce qu'en fait la partie centrale bouge en fonction de la présence ou non des flèches de première et dernières pages :
1405678841.png

Merci d'avance à ceux qui chercherons avec moi.

Réponses

  • bdube30bdube30 Member
    Voici un plugin que j'ai déjà utilisé et qui permet d'avoir plus d'options pour la pagination.

    http://forum.pluxml.org/viewtopic.php?id=3336

    Si tu n'utilises pas le plugin, tu pourras peut-être t'en servir pour t'inspirer su style.
  • aruhunoaruhuno Member
    juillet 2014 modifié
    Salut bdube30,

    Je l'ai déjà essayer, mais à part permettre de masqué certains éléments, je n'ai pas vu de différence avec celle native...
    Enfin, je vais réessayer ça de suite !

    Merci.

    edit : test infructueux, d'autres idées ?
  • Jerry WhamJerry Wham Member
    Je n'ai pas testé mais il faudrait que tu donnes des dimensions fixes à first, prev, next et last afin que le bloc correspondant soit toujours affiché. En utilisant display:inline-bloc;
  • aruhunoaruhuno Member
    juillet 2014 modifié
    Jerry Wham a écrit:
    Je n'ai pas testé mais il faudrait que tu donnes des dimensions fixes à first, prev, next et last afin que le bloc correspondant soit toujours affiché. En utilisant display:inline-bloc;
    Salut Jerry,

    J'ai déjà tenté, le problème c'est que le bloc "span" correspondant n'est pas générer si on est sur la première ou dernière page, du coup, impossible de réserver l'espace.

    Merci en tout cas.
  • Jerry WhamJerry Wham Member
    Et en jouant avec :before et :after ?
  • aruhunoaruhuno Member
    Jerry Wham a écrit:
    Et en jouant avec :before et :after ?
    Hum... c'est à dire ?
  • Jerry WhamJerry Wham Member
    juillet 2014 modifié
    Tu crées un content factice en utilisant ces propriétés css (pseudo-formats) sur le premier .p_page et sur le dernier.
  • aruhunoaruhuno Member
    Jerry Wham a écrit:
    Tu crées un content factice en utilisant ces propriétés css (pseudo-formats) sur le premier .p_page et sur le dernier.
    Je ne vois vraiment pas ce que tu veux dire ><
  • StéphaneStéphane Member, Former PluXml Project Manager
    @aruhuno: voilà ce que je te propose

    Pour tester: à partir du thème par défaut

    1) Supprimer dans le fichier css style.css toute la partie avec les règles sur #pagination 
    /* ---------- PAGINATION ---------- */

    2) ajoute le code suivant à la fin de la feuille de style
    
#pagination .p_first, #pagination .p_prev {
	float:left;
}
#pagination .p_page {
	display: inline-block;
	width: 70%;
	text-align: center;
}
#pagination .p_first {
	margin-right: 10px
}
#pagination .p_last {
	margin-left: 10px
}

    faudra peut etre que tu joues sur le width: 70% pour eviter un retour à la ligne

    Ici je me suis juste intéressé au positionnement sans faire de mise en forme (couleur, italic, etc)

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • aruhunoaruhuno Member
    juillet 2014 modifié
    +Stéphane

    C'est effectivement une technique qui "fonctionne", mais totalement imprécise ; la valeur en pourcent est donnée au pifomètre selon ce que l'on voit d'affiché... en gros, ça semble, mais ça ne l'est pas vraiment.

    Exemple avec la valeur que j'ai pu mettre : 
    [== CSS ==]
#pagination .p_first, #pagination .p_prev {
	float:left;
}
#pagination .p_page {
	display: inline-block;
	width: 81.539995%;
	text-align: center;
}
#pagination .p_first {
	margin-right: 10px
}
#pagination .p_last {
	margin-left: 10px
}

    Mais en réalité, combien de chiffre après la virgule pour que la droite et la gauche soient collées à droite et à gauche ? ^^
  • StéphaneStéphane Member, Former PluXml Project Manager
    Je m'en suis aperçu après que ce n'était pas terrible avec le %

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • aruhunoaruhuno Member
    Stéphane a écrit:
    Je m'en suis aperçu après que ce n'était pas terrible avec le %
    Ben c'est bien si tu es sûr que c'est fixe, mais là ça n'est pas le cas ><

    Visiblement je pose une vraie colle ^^
  • StéphaneStéphane Member, Former PluXml Project Manager
    c'est l'utilisation des <span> qui rend la mise en forme difficile j'ai l'impression

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • aruhunoaruhuno Member
    Stéphane a écrit:
    c'est l'utilisation des <span> qui rend la mise en forme difficile j'ai l'impression

    Je pense pareil, mais comme c'est directement lié à PluXML, j'essaye de m'en accommodé ^^
  • StéphaneStéphane Member, Former PluXml Project Manager
    bon je n'arrive pas à faire mieux que ça
    #pagination {
	width:100%;
	background-color:blue;
	text-align:center;
	padding: 2px;
}
#pagination .p_first {
	background-color:red;
	float:left;
	width:2%;
}
#pagination .p_prev {
	float:left;
	width:15%;
	background-color:yellow;
}
#pagination .p_page {
	background-color: grey;
	float:left;
	width:63%;
}
#pagination .p_next {
	float:left;
	background-color:yellow;
	width:15%;
}
#pagination .p_last {
	float:left;
	background-color:red;
	width:2%;
}

    en jouant sur width:63%; de .p_page on arrive pas tout à fait à centrer la pagination.

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • aruhunoaruhuno Member
    Merci Stéphane, mais encore une fois, le problème reste entier, la valeur est donnée au pifomètre ^^
    C'est gentil de te décarcasser en tout cas =]

    Sinon, j'aurais bien voulu que Jerry nous éclair un peu aussi =P
  • BeduckBeduck Member
    As-tu déjà essayer avec les display flex et les justify-content ?

    Sinon voici un lien qui pourrait peut-être t'aider.

    http://css-tricks.com/almanac/properties/j/justify-content/
  • aruhunoaruhuno Member
    juillet 2014 modifié
    Beduck a écrit:
    As-tu déjà essayer avec les display flex et les justify-content ?

    Sinon voici un lien qui pourrait peut-être t'aider.

    http://css-tricks.com/almanac/properties/j/justify-content/
    Pas mal du tout cette propriété Beduck, merci !
    Bon, par contre j'ai encore quelques soucis avec le code suivant : 
    [== CSS ==]
#pagination {
    height: 23px;
    margin: -6px 0 -17px 0;
    justify-content: space-between;
    display: flex;
}

#pagination a,
#pagination .p_first,
#pagination .p_prev,
#pagination .p_page,
#pagination .p_current,
#pagination .p_next,
#pagination .p_last {
	font-style: italic;
	font-size: 12px;
	color: white;
}

#pagination a:hover {
	color: #ff4e00;
}

#pagination .p_first, #pagination .p_last {
	margin: 0;
}

#pagination .p_prev {
	margin-right: auto;
}

#pagination .p_page {

}

#pagination .p_next {
	margin-left: auto;
}

    Qui m'affiche ça dès que y'a plus d'élément à droite ou à gauche :
    1406032268.png

    Je pense que ça vient du fait que le span disparait si il n'est pas "utile"... allez, on y est presque !

    edit : J'ai préféré me baser sur Alsacreation =]
  • BeduckBeduck Member
    Oui, il faut modifier la pagination pour que ça affiche toujours le suivant mais plus en "<a>" mais plutôt en "<p>" pour par exemple le grisé et qu'il ne soit plus cliquable.

    La je ne vois pas d'autre solution.
  • aruhunoaruhuno Member
    juillet 2014 modifié
    Beduck a écrit:
    Oui, il faut modifier la pagination pour que ça affiche toujours le suivant mais plus en "<a>" mais plutôt en "<p>" pour par exemple le grisé et qu'il ne soit plus cliquable.

    La je ne vois pas d'autre solution.
    Beduck, effectivement, c'est sans doute la solution la plus élégante... mais je ne modifierais pas le code core de PluXML.

    J'ai pu voir avec un ami qui m'a bricoler ceci : 
    [== CSS ==]
#pagination {
    height: 23px;
    line-height: 23px;
	margin: 0;
	position: relative;
	top: -12px;
	margin-bottom: -12px;
    display: flex;
    flex-direction: row;
}

#pagination a,
#pagination .p_first,
#pagination .p_prev,
#pagination .p_page,
#pagination .p_current,
#pagination .p_next,
#pagination .p_last {
	font-style: italic;
	font-size: 12px;
	color: white;
}

#pagination a:hover {
	color: #ff4e00;
}

#pagination .p_first,
#pagination .p_last,
#pagination .p_prev,
#pagination .p_next {
	position: relative;
	z-index: 2;
}

#pagination .p_page {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1;
}

#pagination .p_next {
	margin-left: auto;
}

    C'est pas très propre, mais ça fonctionne au poil !
    Je passe en résolu, mais si quelqu'un à une idée pour faire ça en plus propre, il ne faut pas hésiter =]

    Merci à tout le monde de l'aide que vous avez pu m'apporter !
  • Jerry WhamJerry Wham Member
    Je veux bien essayer de t'aider mais tu n'aurais pas un lien vers une page de démo histoire que l'on puisse voir le rendu. Car débugguer à l'aveugle, c'est chaud.
  • aruhunoaruhuno Member
    juillet 2014 modifié
    Jerry Wham a écrit:
    Je veux bien essayer de t'aider mais tu n'aurais pas un lien vers une page de démo histoire que l'on puisse voir le rendu. Car débugguer à l'aveugle, c'est chaud.
    Si bien-sûr : http://test.inios.fr/ (déployé hier soir)

    Merci encore !
  • aruhunoaruhuno Member
    Bonjour,

    J'ai finalement opté pour une solution plus simple : ajouter dans un plugin la méthode pagination et la modifier pour mes besoins.

    Voici la méthode que j'ai créée (pratiquement une copie de l'originale) : 
    [== PHP ==]
		public function aplxinios_pagination() {
            $plxMotor = plxMotor::getInstance();
                
            $plxGlob_arts = clone $plxMotor->plxGlob_arts;
            $aFiles = $plxGlob_arts->query($plxMotor->motif,'art','',0,false,'before');
        
    		if($aFiles AND $plxMotor->bypage AND sizeof($aFiles)>$plxMotor->bypage) {
    
    			# on supprime le n° de page courante dans l'url
    			$arg_url = $plxMotor->get;
    			if(preg_match('/(\/?page[0-9]+)$/',$arg_url,$capture)) {
    				$arg_url = str_replace($capture[1], '', $arg_url);
    			}
    			# Calcul des pages
    			$prev_page = $plxMotor->page - 1;
    			$next_page = $plxMotor->page + 1;
    			$last_page = ceil(sizeof($aFiles)/$plxMotor->bypage);
    			# Generation des URLs
    			$f_url = $plxMotor->urlRewrite('?'.$arg_url); # Premiere page
    			$arg = (!empty($arg_url) AND $prev_page>1) ? $arg_url.'/' : $arg_url;
    			$p_url = $plxMotor->urlRewrite('?'.$arg.($prev_page<=1?'':'page'.$prev_page)); # Page precedente
    			$arg = !empty($arg_url) ? $arg_url.'/' : $arg_url;
    			$n_url = $plxMotor->urlRewrite('?'.$arg.'page'.$next_page); # Page suivante
    			$l_url = $plxMotor->urlRewrite('?'.$arg.'page'.$last_page); # Derniere page
    
    			# Hook Plugins
    			if(eval($plxMotor->plxPlugins->callHook('plxShowPagination'))) return;
    
    			# Préparation de l'affichage
    			if($plxMotor->page > 2) # Si la page active > 2 on affiche un lien 1ere page
    				$p_first = '<a href="'.$f_url.'" title="'.L_PAGINATION_FIRST_TITLE.'">'.L_PAGINATION_FIRST.'</a>&nbsp;';
    			if($plxMotor->page > 1) # Si la page active > 1 on affiche un lien page precedente
    				$p_prev = '<a href="'.$p_url.'" title="'.L_PAGINATION_PREVIOUS_TITLE.'">'.L_PAGINATION_PREVIOUS.'</a>';
    
    			if($plxMotor->page < $last_page) # Si la page active < derniere page on affiche un lien page suivante
    				$p_next = '<a href="'.$n_url.'" title="'.L_PAGINATION_NEXT_TITLE.'">'.L_PAGINATION_NEXT.'</a>';
    			if(($plxMotor->page + 1) < $last_page) # Si la page active++ < derniere page on affiche un lien derniere page
    				$p_last = '&nbsp;<a href="'.$l_url.'" title="'.L_PAGINATION_LAST_TITLE.'">'.L_PAGINATION_LAST.'</a>';
    				
    			# Afficher la pagination complète
    			echo '<div id="p_left"><span class="p_first">'.$p_first.'</span><span class="p_prev">'.$p_prev.'</span></div>';
    			echo '<div id="p_center">';
    			printf('<span class="p_page p_current">'.L_PAGINATION.'</span>',$plxMotor->page,$last_page);
    			echo '</div>';
    			echo '<div id="p_right"><span class="p_next">'.$p_next.'</span><span class="p_last">'.$p_last.'</span></div>';
    		}
		}

    Du coup, je sépare en trois blocs la pagination et donc peut appliquer ce CSS : 
    [== CSS ==]
#pagination {
    height: 23px;
    line-height: 23px;
	margin: 0;
	position: relative;
	top: -12px;
	margin-bottom: -12px;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

#pagination a,
#pagination .p_first,
#pagination .p_prev,
#pagination .p_page,
#pagination .p_current,
#pagination .p_next,
#pagination .p_last {
	font-style: italic;
	font-size: 12px;
	color: white;
	min-width: 1px;
}

#pagination a:hover {
	color: #ff4e00;
}

#pagination #p_left {
	width: 25%;
}

#pagination #p_center {
    width: 50%;
    text-align: center;
}

#pagination #p_right {
    width: 25%;
	text-align: right;
}

    Je doute que ce soit la "meilleure" solution, mais elle a l'avantage d'être très simple de mise en œuvre.

    Merci à tous de votre aide !
Connectez-vous ou Inscrivez-vous pour répondre.