pagination DSFR

design_system_admin/modeles/pagination.html

 #ENV*{bloc_ancre}
-#SET{bornes,#ENV{page_courante}|bornes_pagination{#ENV{nombre_pages},10}}
+[(#REM) Nombre de résultats par page]
+#SET{nombre_resultat_par_page,10}
+[(#REM) Nombre de liens de page à afficher avant les ...]
+#SET{bornes,#ENV{page_courante}|bornes_pagination{#ENV{nombre_pages},7}}
 #SET{premiere, #GET{bornes}|reset}
 #SET{derniere, #GET{bornes}|end}
 #SET{pages,#GET{premiere}|range{#GET{derniere}}}
-#SET{sep,#ENV{separateur,' | '}}
-<B_pages>
-	[<span
-  class='label'>(#ENV{label,''})</span>][
+#SET{sep,#ENV{separateur,' &nbsp;&nbsp; '}}
 
-	(#SET{item, #ENV{page_courante}|moins{2}|mult{#ENV{pas}} })
+#SET{resultat, (#ENV{nombre_pages}|mult{#GET{nombre_resultat_par_page}}|moins{#GET{nombre_resultat_par_page}})}
+<ul class="fr-pagination__list" id="pagination_list">
+	<B_pages1>
+		[(#SET{item, #ENV{page_courante}|moins{2}|mult{#ENV{pas}} })]
+		[(#REM) <li><a [(#ENV{page_courante}|>{1}|?{'href="/actualites/#pagination_restenews"':''})] class="fr-pagination__link fr-pagination__link--first" aria-disabled="true" role="link">Première page</a></li>]
+		<li>
+			<BOUCLE_page_precedente(CONDITION){si #ENV{page_courante}|>{1}|oui}>
+				<a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"  [(#ENV{page_courante}|>{1}|?{"aria-disabled='false'", "aria-disabled='true'"})] role="link" href="[(#SELF|parametre_url{#ENV{debut},#GET{item}|?{#GET{item}}}|ancre_url{#ENV{ancre}})]">Page précédente</a>
+			</BOUCLE_page_precedente>	
+				<a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label" [(#ENV{page_courante}|>{1}|?{"aria-disabled='false'", "aria-disabled='true'"})] role="link" >Page précédente</a>
+			<//B_page_precedente>			
+		</li>
+		[<li>
+			<a	href='[(#SELF|parametre_url{#ENV{debut},''})]##ENV{ancre}' class='fr-pagination__link' rel='nofollow' [(#ENV{page_courante}|=={#ENV{nombre_pages}}|?{"aria-current='page'", ""})]><span class="sr-only">Page </span>(#GET{premiere}|>{1}|?{1})</a>
+		</li>	
+		<li class="pager__item pager__item--ellipsis" role="presentation">...</li>
+		]
+	<BOUCLE_pages1(POUR){tableau #GET{pages}}>			
+		[(#SET{item, #VALEUR|moins{1}|mult{#ENV{pas}} })]
+		<li>				
+			<span class="sr-only">Page </span>
+			<BOUCLE_page_courante(CONDITION){si #VALEUR|!={#ENV{page_courante}}|oui}>
+				#SET{bad,#VALEUR}
+				<a href="[(#SELF|parametre_url{#ENV{debut},#GET{item}|?{#GET{item}}}|ancre_url{#ENV{ancre}})]"] class="fr-pagination__link" rel="'nofollow">
+					#VALEUR</a>
+			</BOUCLE_page_courante>
+				<BOUCLE_condition_bad(CONDITION){si #VALEUR|!={#GET{bad}}|oui}>
+					<a class="fr-pagination__link" rel="'nofollow" [(#VALEUR|=={#ENV{page_courante}}|?{"aria-current='page'", ""})]>#ENV{page_courante}</a>
+				</BOUCLE_condition_bad>
+				<//B_condition_bad>
+			<//B_page_precedente>
+		</li>
+	</BOUCLE_pages1>
+	</B_pages1>
+	[<li role="presentation">...</li>
+	<li>
+		<a href='[(#SELF|parametre_url{#ENV{debut},#ENV{nombre_pages}|moins{2}|mult{#ENV{pas}}})]##ENV{ancre}' class='fr-pagination__link' [(#VALEUR|=={#ENV{page_courante}}|?{"aria-current='page'", ""})] rel='nofollow'>
+			<span class="sr-only">Page </span>
+			(#GET{derniere}|<{#ENV{nombre_pages}}|?{#ENV{nombre_pages}})
+		</a>
+	</li>]
+	<li>
+		<BOUCLE_page_suivante(CONDITION){si #ENV{page_courante}|<{#ENV{nombre_pages}}|oui}>
+			#SET{page_suivante, #ENV{page_courante}|plus{1}|mult{#ENV{pas}}|moins{#ENV{pas}}}
+			<a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" aria-disabled="false" role="link" href="[(#SELF|parametre_url{#ENV{debut},#GET{page_suivante}}|ancre_url{#ENV{ancre}})]">Page suivante</a>
+		</BOUCLE_page_suivante>	
+			<a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" aria-disabled="true" role="link">Page suivante</a>
+		<//B_page_suivante>	
+	</li>
+		#SET{lastpage,href="/actualites/?debut_restenews=#GET{resultat}#pagination_restenews"}
+	[(#REM) <li>
+		<a [(#ENV{page_courante}|<{#ENV{nombre_pages}}|?{#GET{lastpage}:''})] class="fr-pagination__link fr-pagination__link--last">Dernière page</a>
+	</li>]
+</ul>    
 
-	][<span
-	class="prev[(#ENV{page_courante}|<={1}|oui)disabled]">(#ENV{url}
-	|parametre_url{#ENV{debut},#GET{item}|?{#GET{item}}}
-	|ancre_url{#ENV{ancre}}
-	|lien_ou_expose{#ENV{label_precedent,<:public:page_precedente:>},#ENV{page_courante}|<={1},'lien_pagination','',nofollow}
-	|inserer_attribut{rel,prev}
-	)[<span
-	class='sep'>(#GET*{sep})</span>]</span>]<span
-	class="pages">[<a
-	href='[(#ENV{url}|parametre_url{#ENV{debut},''})]##ENV{ancre}'
-	class='lien_pagination'
-	rel='nofollow'>(#GET{premiere}|>{1}|?{1})</a><span
-	class="tbc">[<span
-	class='sep'>(#GET*{sep})</span>]...[<span
-	class='sep'>(#GET*{sep})</span>]</span
-
-		>]<BOUCLE_pages(POUR){tableau #GET{pages}}>[
-		(#SET{item, #VALEUR|moins{1}|mult{#ENV{pas}} })
-		][(#ENV{url}
-		|parametre_url{#ENV{debut},#GET{item}|?{#GET{item}}}
-		|ancre_url{#ENV{ancre}}
-		|lien_ou_expose{#VALEUR,#VALEUR|=={#ENV{page_courante}},lien_pagination,'',nofollow})][<span
-		class='sep'>(#VALEUR|<{#GET{derniere}}|?{#GET{sep}})</span
-		>]</BOUCLE_pages>[<span
-
-	class="tbc">[<span
-	class='sep'>(#GET*{sep})</span>]...[<span
-	class='sep'>(#GET*{sep})</span>]</span><a
-	href='[(#ENV{url}|parametre_url{#ENV{debut},#ENV{nombre_pages}|moins{1}|mult{#ENV{pas}}})]##ENV{ancre}'
-	class='lien_pagination'
-	rel='nofollow'>(#GET{derniere}|<{#ENV{nombre_pages}}|?{#ENV{nombre_pages}})</a>]</span>[
-	(#SET{item, #ENV{page_courante}|mult{#ENV{pas}} })
-	][<span
-	class="next[(#ENV{page_courante}|>={#ENV{nombre_pages}}|oui)disabled]">[<span class='sep'>(#GET*{sep})</span>](#ENV{url}
-	|parametre_url{#ENV{debut},#GET{item}|?{#GET{item}}}
-	|ancre_url{#ENV{ancre}}
-	|lien_ou_expose{#ENV{label_suivant,<:public:page_suivante:>},#ENV{page_courante}|>={#ENV{nombre_pages}},'lien_pagination','',nofollow}
-	|inserer_attribut{rel,next}
-	)</span>]
-</B_pages>
\ No newline at end of file