garant/Vue/Ajaxlisteadherents/index.php

<style>
	/* Styles spécifiques pour isoler les styles de Bootstrap */
	#adherent-container .status-vigueur {
		color: green;
		font-weight: bold;
	}
	#adherent-container .status-retire {
		color: red;
		font-weight: bold;
	}
	#adherent-container .card {
		transition: transform 0.2s;
	}
	#adherent-container .card:hover {
		transform: scale(1.05);
	}
</style>

<div id="adherent-container" class="container my-4">
    <!-- Barre de recherche -->
    <div class="row mb-4">
        <div class="col-md-6">
           <h5 style="font-weight:bold"> <?= _("Nombre filtré").": ".format_N($nbreAdherent); ?></h5>
        </div>
    </div>

    <!-- Message si aucun adhérent n'est trouvé -->
    <div id="no-results" class="text-center text-muted" style="display: none;">
        Aucun adhérent trouvé pour votre recherche.
    </div>

    <!-- Liste des adhérents -->
    <div class="row" id="adherents-list"></div>

    <!-- Pagination -->
    <div id="pagination-container" class="mt-4 d-flex justify-content-center"></div>
</div>

<!-- Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" aria-labelledby="infoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="infoModalLabel">Informations sur l'adhérent</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img id="modalPhoto" src="" alt="Photo de l'adhérent" class="img-fluid rounded mb-3">
                <h5 id="modalNom"></h5>
                <p id="modalStatut"></p>
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-primary" onclick="afficher_Fichebeneficiaire();">Bénéficiaires</button>
                    <button type="button" class="btn btn-secondary" onclick="afficher_InfoAdherent();">Info adhérents</button>
                    <button type="button" class="btn btn-success" onclick="afficher_ReseauSoins();">Réseaux soins</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Liste des adhérents
    let adherents = <?= $adherents; ?>;
    
    const adherentsList = document.getElementById('adherents-list');
    const modalPhoto = document.getElementById('modalPhoto');
	const modalNumero = document.getElementById('modalNumero');
    const modalNom = document.getElementById('modalNom');
    const modalStatut = document.getElementById('modalStatut');
    const noResults = document.getElementById('no-results');
    const paginationContainer = document.getElementById('pagination-container');

    // Nombre d'éléments par page
    const ITEMS_PER_PAGE = 16;
    let currentPage = 1;

    // Fonction pour afficher les adhérents avec pagination
    function afficherAdherents(filtre = "") {
        adherentsList.innerHTML = ""; // Vider la liste
        const filteredAdherents = adherents.filter(adherent =>
            adherent.nom.toLowerCase().includes(filtre.toLowerCase())
        );

        // Si aucun adhérent trouvé
        if (filteredAdherents.length === 0) {
            noResults.style.display = "block";
        } else {
            noResults.style.display = "none";
            
            // Calculer les indices de début et de fin pour la page actuelle
            const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
            const endIndex = startIndex + ITEMS_PER_PAGE;
            const paginatedAdherents = filteredAdherents.slice(startIndex, endIndex);

            // Afficher les adhérents de la page actuelle
            paginatedAdherents.forEach(adherent => {
                adherentsList.innerHTML += `
                    <div class="col-md-3">
                        <div class="card mb-4">
                            <img src="${adherent.photo}" class="card-img-top img-clickable" alt="Photo adhérent" data-bs-toggle="modal" data-bs-target="#infoModal" data-numero="${adherent.numero}"  data-nom="${adherent.nom}" data-photo="${adherent.photo}" data-statut="${adherent.statut}">
                            <div class="card-body">
                                <h6 class="card-title">${adherent.numero}</h6>
                                <h5 class="card-title">${adherent.nom}</h5>
                                <h6>${adherent.genre}</h6>
                                <span class="status ${adherent.classeStatut}">${adherent.statut}</span>
                            </div>
                        </div>
                    </div>
                `;
            });

            // Ajouter l'événement de clic sur les images
            document.querySelectorAll('.img-clickable').forEach(img => {
                img.addEventListener('click', function() {
					selectionner_adherent_numero(this.getAttribute('data-numero'));
					selectionner_adherent(this.getAttribute('data-nom'));
                    modalPhoto.src = this.getAttribute('data-photo');
                    modalNom.textContent = this.getAttribute('data-nom');
                    modalStatut.textContent = `Statut: ${this.getAttribute('data-statut')}`;
                });
            });

            // Afficher la pagination
            afficherPagination(filteredAdherents.length);
        }
    }

    // Fonction pour afficher la pagination avec pages 1 à 10
    function afficherPagination(totalItems) {
        paginationContainer.innerHTML = ""; // Vider la pagination

        const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
        const maxPagesToShow = 10;
        let startPage = 1;
        let endPage = Math.min(maxPagesToShow, totalPages);

        // Si le nombre total de pages dépasse 10, ajuster la plage de pages à afficher
        if (currentPage > 10) {
            startPage = Math.floor((currentPage - 1) / maxPagesToShow) * maxPagesToShow + 1;
            endPage = Math.min(startPage + maxPagesToShow - 1, totalPages);
        }

        // Bouton Précédent
        const prevButton = document.createElement('button');
        prevButton.classList.add('btn', 'btn-outline-primary', 'mx-1');
        prevButton.textContent = "Précédent";
        prevButton.disabled = currentPage === 1; // Désactiver le bouton si on est à la première page
        prevButton.onclick = () => {
            if (currentPage > 1) {
                currentPage--;
                afficherAdherents();
            }
        };
        paginationContainer.appendChild(prevButton);

        // Boutons de page (affichage des pages de 1 à 10)
        for (let i = startPage; i <= endPage; i++) {
            const pageButton = document.createElement('button');
            pageButton.classList.add('btn', 'btn-outline-primary', 'mx-1');
            pageButton.textContent = i;
            pageButton.onclick = () => {
                currentPage = i;
                afficherAdherents();
            };
            
            // Marquer le bouton de la page actuelle
            if (i === currentPage) {
                pageButton.classList.add('active');
            }
            
            paginationContainer.appendChild(pageButton);
        }

        // Bouton Suivant
        const nextButton = document.createElement('button');
        nextButton.classList.add('btn', 'btn-outline-primary', 'mx-1');
        nextButton.textContent = "Suivant";
        nextButton.disabled = currentPage === totalPages; // Désactiver le bouton si on est à la dernière page
        nextButton.onclick = () => {
            if (currentPage < totalPages) {
                currentPage++;
                afficherAdherents();
            }
        };
        paginationContainer.appendChild(nextButton);
    }

    // Afficher tous les adhérents au chargement
    afficherAdherents();

    // Ajouter un écouteur sur la barre de recherche
    document.getElementById('searchBar').addEventListener('input', (e) => {
        currentPage = 1; // Réinitialiser la page à 1 lors d'une nouvelle recherche
        afficherAdherents(e.target.value);
    });
</script>