Implémentation de la paginattion côté serveur (Python)

class PaginateurContenu:
    @staticmethod
    def extraire_page(liste_complete, metadonnees, num_page, elements_par_page=15):
        total_elements = len(metadonnees) if metadonnees else 0
        
        if not metadonnees:
            return [], num_page, 0, 1, 1, 1
            
        pages_totales = (total_elements + elements_par_page - 1) // elements_par_page
        page_courante = min(num_page, pages_totales)
        
        debut = (page_courante - 1) * elements_par_page
        fin = min(debut + elements_par_page, total_elements)
        elements_page = liste_complete[debut:fin]
        
        page_precedente = max(1, page_courante - 1)
        page_suivante = min(pages_totales, page_courante + 1)
        
        return elements_page, page_courante, total_elements, pages_totales, page_precedente, page_suivante

Gestion des événements de navigation (JavaScript)

document.getElementById('btn_premiere').addEventListener('click', function() {
    document.getElementById('champ_page').value = '1';
    effectuerRecherche();
});

document.getElementById('btn_derniere').addEventListener('click', function() {
    document.getElementById('champ_page').value = document.getElementById('total_pages').textContent;
    effectuerRecherche();
});

document.getElementById('btn_precedente').addEventListener('click', function() {
    let valeurPage = parseInt(document.getElementById('champ_page').value);
    document.getElementById('champ_page').value = Math.max(1, valeurPage - 1);
    effectuerRecherche();
});

document.getElementById('btn_suivante').addEventListener('click', function() {
    let valeurPage = parseInt(document.getElementById('champ_page').value);
    document.getElementById('champ_page').value = valeurPage + 1;
    effectuerRecherche();
});

function effectuerRecherche() {
    const nbColonnes = document.querySelectorAll('#entete-tableau th').length;
    const conteneurDonnees = document.getElementById('corps-tableau');
    
    conteneurDonnees.innerHTML = `<tr><td class="text-center" colspan="${nbColonnes}">
        <i class="fa fa-spinner fa-spin"></i> Chargement en cours...
    </td></tr>`;

    const parametres = {
        projet: document.getElementById('filtre_projet').value,
        statut: document.getElementById('filtre_statut').value,
        terme: document.getElementById('champ_recherche').value,
        page: document.getElementById('champ_page').value
    };

    fetch('/api/journaux/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(parametres)
    })
    .then(reponse => reponse.json())
    .then(donnees => {
        if (donnees.erreur) {
            afficherErreur(donnees.message);
            return;
        }
        
        mettreAJourPagination(donnees.pagination);
        construireTableau(donnees.elements);
    })
    .catch(erreur => {
        afficherErreur('Erreur de communication avec le serveur');
    });
}

function construireTableau(elements) {
    let html = '';
    
    elements.forEach(item => {
        html += `<tr class="${item.statut === 'actif' ? 'table-success' : ''}">
            <td><strong>${item.titre}</strong></td>
            <td>${item.auteur}</td>
            <td>${formaterDate(item.date_creation)}</td>
            <td>${genererBadges(item.tags)}</td>
            <td>${creerBoutonsAction(item)}</td>
        </tr>`;
    });
    
    document.getElementById('corps-tableau').innerHTML = html;
}

Concepts clés du rendu dynamique

Le rendu dynamique côté client transforme des données en interface utilisateur interactive. Deux approches principales eixstent :

• Rendu côté serveur : Le HTML est généré avant l'envoi au navigateur. Des moteurs comme Django Template ou Jinja2 permettent d'intégrer des variables et de la logique directement dans le markup.
• Rendu côté client : Le JavaScript génère ou modifie le DOM après le chargement initial. Des méthodes comme innerHTML ou des bibliothèques comme React/Vue permettent des mises à jour partielles sans rechargement complet de la page.

Cette seconde approche est particulièrement utile pour les interactions utilisateur complexes, où seules certaines parties de l'interface nécessitent une mise à jour. L'utilisation d'API REST avec du JSON comme format d'échange permet de séparer clairement la logique métier du rendu.