Barra di paginazione 
Autor: Giordano M.
Visitado 141,
Seguidores 2,
Compartilhado 0
Come posso creare una barra di paginazione con visualizzazione dei numeri e ai margini le scritte Previous e Next?
Tipo questa:
Publicado em
... ho aspettato a dire la mia, e visto che son passati tutti, ti posso dire quello che ho sempre detto in passato e che forse hai già trovato-rilevato cercando in HelpCenter, ...per cui penso che magari potresti aver già risolto...
... comunque te li ripropongo lo stesso, ... e senza strafare:
1> ... puoi usare il blog che crea la paginazione automaticamente...
2> ... oppure, neanche a dirlo, puoi usare semplicemente e manualmente l'Oggetto Testo(*) per creare da te i collegamenti.:
<< | 1 | 2 | 3 | (eccetera) | >>
3> ... oppure potresti semplicemente usare i sotto livelli numerati 1,2,3,ecc. e quindi usarli in Oggetto MENU... ...
4> ... oppure puoi usare un qualsiasi paginatore extra che trovi ricercando in rete...
5> ... oppure per pagine sequenziali [ << | >> ] ...puoi usare il mio codice EXTRA che trovi > qui...
6> ... in più (++) , ci sarebbero a seconda dei casi mie invenzioni esclusive ed uniche in EXTRA, che a seconda se trattasi del menu generale o di un determinato livello/(sottoLivelli) e se impostati in modo congruo, permetterebbero con un click la paginazione dinamica sequenziale automatica esclusiva di questo tipo:
<< | [ 3 ] | >>
7> ... oppure esclusiva paginazione dinamica numerica automatica di questo tipo:
[1] - [2] - [3] | (eccetera)
8> ... eccetera eccetera per idee nuove da inventare al momento...
...
... più semplice a farsi che a dirsi, ... di idee adesso ne hai da cui trarne spunto...
... (*) - volendo, secondo una mia personale idea sempre esclusiva, per questo caso in Oggetto Testo si potrebbe generare facilmente il menu in una singola pagina nascosta , e quindi poter usare lo stesso menu in tutte le pagine tramite importazione in IFRAME dinamico (o meno)...
.
ciao
.
Autor
Grazie mille per aver risposto. Alla fine Santo ChatGpt mi ha scritto codice perfettamente uguale all'esempio che avevo mandato, modificabile e responsive, il tutto in 3 secondi! TOP
... ottima soluzione; ...ormai chi ha idee e sa fare può fare di più...
.
Penso sarebbe utile ed interessante vederlo all'opera per altri utenti con la tua necessità...
Si, se lo condividessi sarebbe davvero utile.
Grazie in anticipo
Nell'attesa dell'autore del post:
Oggetto HTML
<div class="pagination">
<a class="previous" href="#">« Previous</a>
<a href="#">1</a>
<a href="#">2</a>
<a class="active" href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a class="next" href="#">Next »</a>
</div>
Codice CSS in Esperto (sempre oggetto HTML)
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
.pagination .previous { border-radius: 5px 0 0 5px; }
.pagination .next { border-radius: 0 5px 5px 0; }
////// RISULTATO ///////
... .... ma dalla rapidità con cui dice di aver risolto penso che abbia usato una delle soluzione ovvie, ...per esempio propri quella del ,4> ...ove vengono proposte decine di soluzioni già parzialmente pronte, spesso macchinose e non automatiche(!), ...penso niente di più...
... invece per le soluzioni proposte dal .5> in su si tratterebbe di ben altro...
.
ciao
...
.
Autor
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Paginazione Dinamica</title>
<style>
.pagination {
display: flex;
list-style: none;
padding: 0;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
margin-top: 30px;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #333;
border-radius: 5px;
transition: background-color 0.3s;
}
.pagination a:hover {
background-color: #e0e0e0;
}
.pagination .active a {
background-color: #980000;
color: white;
pointer-events: none;
}
.pagination .arrow a {
font-weight: bold;
}
</style>
</head>
<body>
<!-- Il tuo contenuto qui sopra -->
<ul class="pagination" id="pagination"></ul>
<script>
const totalPages = 20; // Cambia qui se hai più o meno pagine
const maxVisible = 5;
// Determina il numero di pagina in base al nome del file
let currentPage = 1;
const path = location.pathname;
if (path.includes("clarinet")) {
const match = path.match(/clarinet(\d+)_en\.html/);
if (match) {
currentPage = parseInt(match[1]);
}
} else if (path.includes("index.html")) {
currentPage = 1;
}
const pagination = document.getElementById('pagination');
function renderPagination() {
pagination.innerHTML = '';
// Freccia sinistra
if (currentPage > 1) {
const prev = document.createElement('li');
prev.classList.add('arrow');
const prevPage = currentPage - 1;
const prevLink = (prevPage === 1) ? "index.html" : `clarinet${String(prevPage).padStart(2, '0')}_en.html`;
prev.innerHTML = `<a href="${prevLink}">‹</a>`;
pagination.appendChild(prev);
}
// Intervallo pagine visibili
let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
let end = start + maxVisible - 1;
if (end > totalPages) {
end = totalPages;
start = Math.max(1, end - maxVisible + 1);
}
// Numeri di pagina
for (let i = start; i <= end; i++) {
const li = document.createElement('li');
li.className = (i === currentPage) ? 'active' : '';
const pageLink = (i === 1) ? "index.html" : `clarinet${String(i).padStart(2, '0')}_en.html`;
li.innerHTML = `<a href="${pageLink}">${i}</a>`;
pagination.appendChild(li);
}
// Freccia destra
if (currentPage < totalPages) {
const next = document.createElement('li');
next.classList.add('arrow');
const nextPage = currentPage + 1;
const nextLink = `clarinet${String(nextPage).padStart(2, '0')}_en.html`;
next.innerHTML = `<a href="${nextLink}">›</a>`;
pagination.appendChild(next);
}
}
renderPagination();
</script>
</body>
</html>
RISULTATO
Autor
Ho dato a ChatGpt tutte info, come dovranno chiamarsi le pagine, il colore. Questo va bene fino a 99 pagine, mi ha detto anche la piccola modifica da fre qualora le paggine andassero oltre le 100. Smplice copia e incolla...e passa la paura
Autor