Paginação Componentes

O que é

Quando uma lista é grande demais para uma tela só — produtos da loja, posts do blog, pedidos no painel — ela é dividida em páginas, e embaixo aparecem os números para trocar de página. Com o SWCore você não monta os números à mão: informa o total de itens (sw-pagination-total), quantos mostram por página (sw-pagination-per) e em qual página está (sw-pagination-cur). Ele calcula quantas páginas existem, mostra as vizinhas da atual, resume o resto com "…" e coloca setas de anterior/próxima.

O JavaScript do núcleo desenha os números dentro da <nav>. A página atual ganha um fundo na cor primária que desliza até o número clicado. Ao clicar, ele atualiza sw-pagination-cur e dispara o evento sw:pagination:change com o número da nova página — é o seu código que carrega os itens daquela página (por AJAX ou trocando o endereço). As setas ficam apagadas na primeira e na última página. Funciona com teclado (Tab + Enter) e nos dois temas.

Quando usar

• Loja virtual: grade de produtos com 12 ou 24 por página.
• Blog / notícias: lista de posts.
• Painel admin: tabelas de pedidos, clientes, agendamentos carregadas por AJAX.
• Se a lista for pequena (cabe numa tela), não precisa. Se quiser "carregar mais ao rolar", veja o Infinite Scroll.

Comece aqui

1. 1

   Coloque o SWCore na página: CSS no <head> e JS no fim do <body>. A paginação precisa dos dois.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do <body> -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Escreva a <nav> vazia com o total, quantos por página e a página atual. 240 itens ÷ 10 por página = 24 páginas. Clique nos números.

   <nav sw-pagination sw-pagination-total="240" sw-pagination-per="10" sw-pagination-cur="4"></nav>

3. 3

   Escute a troca de página e carregue os itens dela.

   const paginas = document.querySelector('[sw-pagination]');
   paginas.addEventListener('sw:pagination:change', (e) => {
     carregarProdutos(e.detail.page);   // sua função: busca a página e mostra na tela
   });

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div id="produtos">…</div>
<p id="info">Mostrando produtos 1 a 12 de 96</p>
<nav sw-pagination="pill" id="paginas" sw-pagination-total="96" sw-pagination-per="12" sw-pagination-cur="1"></nav>

<script>
  document.getElementById('paginas').addEventListener('sw:pagination:change', async (e) => {
    const pagina = e.detail.page;
    const resp = await fetch('/produtos?pagina=' + pagina);
    document.getElementById('produtos').innerHTML = await resp.text();
    const de = (pagina - 1) * 12 + 1, ate = Math.min(pagina * 12, 96);
    document.getElementById('info').textContent = 'Mostrando produtos ' + de + ' a ' + ate + ' de 96';
  });
</script>

<div class="flx j-sb alc">
  <span>1.284 pedidos</span>
  <nav sw-pagination="sm" sw-pagination-total="1284" sw-pagination-per="20"
       sw-pagination-cur="1" sw-pagination-delta="1" sw-pagination-ends></nav>
</div>

<!-- no PHP, escreva a página atual que veio na URL (?pagina=3) -->
<nav sw-pagination sw-pagination-total="<?= $totalPosts ?>" sw-pagination-per="9"
     sw-pagination-cur="<?= $paginaAtual ?>"></nav>

<script>
  document.querySelector('[sw-pagination]').addEventListener('sw:pagination:change', (e) => {
    location.href = '/blog?pagina=' + e.detail.page;
  });
</script>

SW.Pagination.goto('#paginas', 5);   // vai para a página 5 (dispara sw:pagination:change)
// o mesmo, pelo elemento:
document.getElementById('paginas')._swPagination.goto(5);

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.min.js — sem o JS a <nav> fica vazia.
• Um jeito de buscar os itens de cada página (seu servidor/AJAX).

Cuidados — erros comuns

• Esperar que a lista troque sozinha: a paginação só mostra os números e avisa a troca (sw:pagination:change). Buscar os itens daquela página é com você.
• Colocar os números à mão dentro da <nav>: não precisa — e o que estiver lá continua aparecendo junto. Deixe-a vazia.
• Mudar sw-pagination-total depois (ex.: filtro que reduz a lista) e esperar que ela recalcule: o total é lido só uma vez. Troque a <nav> inteira por uma nova com o total certo.
• Esquecer sw-pagination-per: ele assume 10 por página e a conta fica errada se sua lista mostra 12.

O que ele não faz

• Os números não são links de verdade (<a href>): o Google não segue essa paginação. Para SEO de blog/loja, mantenha também links normais "Próxima página" gerados no servidor.
• A cor do destaque é sempre a primária; não há opção de outra cor.
• Não mostra "ir para a página ___" nem "itens por página".