mad-pagination

Componente de paginacao standalone para listagens custom (cards, timelines, grids manuais). Renderiza botoes prev/next + numeros com janela e ellipsis.

MadDataGrid ja tem paginacao embutida#

Se voce esta usando <mad-grid self> (MadDataGrid), NAO use este componente. O grid ja tem paginacao no footer controlada pela prop $perPage e pelo state interno.

Use <mad-pagination> apenas em listagens custom onde voce monta o HTML manualmente (ex: galeria de cards, lista de posts, timeline paginada).

Props#

Ao clicar num botao, chama madPaginate(n) (funcao global JS) — voce precisa definir essa funcao ou substituir o slot.

Uso basico#

<mad-pagination :page="$pagina" :total="$totalPaginas" />

Com janela maior#

{{-- Mostra 5 paginas ao redor da atual --}}
<mad-pagination :page="$pagina" :total="$totalPaginas" :window="5" />

Em listagem custom com mad:click#

Como o componente usa onclick="madPaginate(n)", voce precisa de um handler global. Para integrar com MadComponent, defina window.madPaginate no Blade:

@php
    $perPage = 12;
    $pagina  = $pagina ?? 1;

    $paginator = Produto::orderBy('nome')->paginate($perPage, ['*'], 'page', $pagina);
    $items = $paginator->items();
    $total = $paginator->lastPage();
@endphp

<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;">
    @foreach($items as $p)
        <mad-card>
            <h3>{{ $p->nome }}</h3>
        </mad-card>
    @endforeach
</div>

<mad-pagination :page="$pagina" :total="$total" />

<script>
window.madPaginate = function (n) {
    Mad.call('onPaginate', { pagina: n });
};
</script>

public int $pagina = 1;

public function onPaginate(int $pagina): void
{
    $this->pagina = $pagina;
}

Slot custom (substitui o conteudo todo)#

Quando precisa de botoes diferentes (ex: "Anterior" / "Proximo" com texto), passe conteudo no slot:

<mad-pagination :page="$pagina" :total="$total">
    <mad-btn variant="ghost" icon="chevron-left"
        :disabled="$pagina <= 1"
        :attrs="'onclick=madPaginate(' . ($pagina - 1) . ')'">
        Anterior
    </mad-btn>
    <span style="padding:0 12px;">Pagina {{ $pagina }} de {{ $total }}</span>
    <mad-btn variant="ghost" icon-end="chevron-right"
        :disabled="$pagina >= $total"
        :attrs="'onclick=madPaginate(' . ($pagina + 1) . ')'">
        Proximo
    </mad-btn>
</mad-pagination>

Resumo de decisao#

NUNCA fazer#

{{-- ERRADO: usar <mad-pagination> dentro de listagem com MadDataGrid --}}
<mad-grid self per-page="15">
    <mad-columns>...</mad-columns>
</mad-grid>
<mad-pagination :page="$pagina" :total="$total" />

{{-- CERTO: o MadDataGrid ja tem paginacao no footer --}}
<mad-grid self per-page="15">
    <mad-columns>...</mad-columns>
</mad-grid>

{{-- ERRADO: montar paginacao manual com HTML --}}
<ul class="pagination">
    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2">2</a></li>
</ul>

{{-- CERTO --}}
<mad-pagination :page="$pagina" :total="$total" />

{{-- ERRADO: esquecer de definir window.madPaginate em listagens custom --}}
<mad-pagination :page="$p" :total="$t" />
{{-- → clique nos botoes lanca "madPaginate is not defined" --}}

{{-- CERTO: definir o handler --}}
<mad-pagination :page="$p" :total="$t" />
<script>window.madPaginate = function(n) { Mad.call('onPaginate', { pagina: n }); };</script>

{{-- ERRADO: calcular paginas manualmente em vez de usar o paginator do Laravel --}}
@php $total = (int) ceil(Produto::count() / $perPage); @endphp

{{-- CERTO: LengthAwarePaginator ja calcula lastPage() --}}
@php $total = Produto::paginate($perPage)->lastPage(); @endphp