Partage

[BOOTSTRAP] Pagination au sein d'une nav-tabs

13 juin 2018 à 14:14:14

Bonjour à vous,

Comme l'indique le titre du sujet, mon problème concerne Bootstrap, et avant de vous l'expliquer en détail, voici le contexte de mon travail.

Je suis en stage de fin de DUT dans une grosse entreprise qui, a mon grand malheur, ne compte aucun salarié véritablement bon en développement parmi ses rangs, d'où mon appel à l'aide sur ce forum. 

Toujours est-il qu'il m'a été demandé de réaliser une application web de covoiturage interne au groupe. En d'autre termes, les usagers pourront à la fois proposer leur trajet mais également faire une recherche de trajets. Jusque-là, rien de trop compliqué à mettre en œuvre.

La difficulté réside dans le fait qu'il y a deux types de trajet :

  • Les trajets quotidiens : les usagers proposent leurs trajets avec emploie du temps de la semaine
  • Les trajets occasionnels : les usagers proposent leur trajet avec une date et des horaire bien précis

En bref, afin d'éviter toute redondance d'information, j'ai opté l'ergonomie suivante (que je ne veux en aucun cas changer) pour le moteur de recherche de trajet :

  • Un nav-tabs, afin de dissocier les deux types de trajet
  • Une pagination au sein des deux tabs, afin de ne pas afficher tous les trajets sur une seule page

Afin de mieux comprendre, du moins je l'espère, voici ci-dessous deux screens illustrant mes propos :

Et enfin une dernière screen concernant la pagination :

Maintenant que le contexte, un peu long j'ai peur, a été posé, voici mon problème : la pagination ne marche plus (version antérieure sans nav-tabs marchait), lorsqu'elle se situe dans le contenu d'un onglet.

Voici un extrait de code de ma vue du moteur de recherche :

<div class="container">

	<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
		
		<li class="nav-item">
  
			<a class="nav-link active" data-toggle="tab" href="#journeyJob" role="tab" >TRAJETS QUOTIDIENTS</a>

		</li>

		<li class="nav-item">
  
			<a class="nav-link" data-toggle="tab" href="#journeyShifting" role="tab">TRAJETS OCCASIONNELS</a>

		</li>
	
	</ul>

	<div class="tab-content" id="myTabContent">
		
		<div class="tab-pane fade show active" id="journeyJob" role="tabpanel" aria-labelledby="1-tab">
			
			<div class="tab-pane-header">
				
				<!-- barre de recherche en orange -->
				
			</div>
			
			<!-- Liste des trajets -->
			
			<!-- La pagination --> 
			
			<?php
			
			$page = (!empty($_GET['page']) ? $_GET['page'] : 1);

			if(isset($numberOfPagesJob) && $numberOfPagesJob > 1) {

			?>

			<ul class="pagination justify-content-center">

				<li class="page-item <?php if ($page <= 1) { echo 'disabled'; } ?>">

					<a class="page-link chevron" href="?action=searchAJourney#journeyJob&page=<?php echo $page - 1; ?>">&laquo;</a>

				</li>

				<?php

				for ($i = 1; $i <= $numberOfPagesJob; $i++) {

					?>

					<li class="page-item <?php if ($i == $page) { echo 'active'; } ?>">

						<a class="page-link" href="?action=searchAJourney#journeyJob&page=<?php echo $i; ?>"><?php echo $i; ?></a>

					</li>

					<?php

				}

				?>

				<li class="page-item <?php if ($page >= $numberOfPagesJob) { echo 'disabled'; } ?>">

					<a class="page-link chevron" href="?action=searchAJourney#journeyJob&page=<?php echo $page + 1; ?>">&raquo;</a>

				</li>

			</ul>

			<?php

			}

			?>
			
		</div>
		
	</div>
	
</div>

Lorsque l'on clique sur un onglet, trajet quotidien par exemple, que l'on effectue une recherche et que l'on clique pour accéder à la deuxième page voici L’URL obtenu :

Au chargement de cette URL, le contrôleur du site doit normalement effectuer une recherche de trajet avec comme paramètre journeyJob (trajets quotidiens) ainsi que le fait qu'il s'agisse de la page 2 (trajet 11 à 20).

Autant les onglets chargent parfaitement, cependant lorsque je clique sur les boutons des pages, rien ne se passe. Je reste bloqué à la page 1 avec les premiers trajets, bien que L’URL elle change et affiche bien page=3 par exemple.

Enfin bref, j'espère vraiment ne décourager personne à la vue de ma longue explication car j'ai vraiment besoin d'aide pour cette dernière difficulté que je rencontre dans mon projet. Bien entendu, un long travail de recherche sur le web ne m'a rien apporté, je requière donc votre aide et vous en remercie d'avance.

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%

[BOOTSTRAP] Pagination au sein d'une nav-tabs

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown