Utilize o componente Paginação para dividir conteúdos longos em várias páginas, facilitando a navegação e a gestão de grandes volumes de dados ou itens. Este componente é essencial para melhorar a experiência do utilizador em listas extensas, permitindo o acesso a diferentes seções de conteúdo de forma controlada e organizada.
Permite que os utilizadores avancem ou retrocedam através de páginas de conteúdo, melhorando a acessibilidade a grandes quantidades de informações.
Divide o conteúdo em partes menores, tornando-o mais manejável e menos avassalador.
Indica claramente a página atual e o total de páginas disponíveis, ajudando os utilizadores a se orientarem dentro do conteúdo.
Incorpore o componente Paginação sempre que precisar melhorar a navegação em grandes conjuntos de dados ou itens, proporcionando uma experiência de utilizador mais organizada e eficiente.
| ID | Nome |
|---|---|
| 1 | Item 1 |
| 2 | Item 2 |
| 3 | Item 3 |
| 4 | Item 4 |
| 5 | Item 5 |
| 6 | Item 6 |
| 7 | Item 7 |
| 8 | Item 8 |
| 9 | Item 9 |
| 10 | Item 10 |
| 11 | Item 11 |
| 12 | Item 12 |
| 13 | Item 13 |
| 14 | Item 14 |
| 15 | Item 15 |
Para associar uma paginação a uma tabela, por exemplo, deve identificar o elemento, nesse caso a tabela, com um id como mostra o exemplo (id="tableTest") para depois adicionar como parâmetro à paginação (data-element-id="tableTest"). Para além desse parâmetro pode também colocar quantos items/registos quer apresentar por página (data-items-per-page="4") bem como o total de items/registos totais (data-total-items="15").
Os parâmetros data-total-items e o data-items-per-page não são obrigatórios, sendo que o total de items por página por defeito são 10.
<div class="gra-table-wrapper">
<table class="gra-table" id="tableTest">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
</tr>
</thead>
<tbody>
<tr class="content-item">
<td>1</td>
<td>Item 1</td>
</tr>
<tr class="content-item">
<td>2</td>
<td>Item 2</td>
</tr>
<tr class="content-item">
<td>3</td>
<td>Item 3</td>
</tr>
<tr class="content-item">
<td>4</td>
<td>Item 4</td>
</tr>
<tr class="content-item">
<td>5</td>
<td>Item 5</td>
</tr>
<tr class="content-item">
<td>6</td>
<td>Item 6</td>
</tr>
<tr class="content-item">
<td>7</td>
<td>Item 7</td>
</tr>
<tr class="content-item">
<td>8</td>
<td>Item 8</td>
</tr>
<tr class="content-item">
<td>9</td>
<td>Item 9</td>
</tr>
<tr class="content-item">
<td>10</td>
<td>Item 10</td>
</tr>
<tr class="content-item">
<td>11</td>
<td>Item 11</td>
</tr>
<tr class="content-item">
<td>12</td>
<td>Item 12</td>
</tr>
<tr class="content-item">
<td>13</td>
<td>Item 13</td>
</tr>
<tr class="content-item">
<td>14</td>
<td>Item 14</td>
</tr>
<tr class="content-item">
<td>15</td>
<td>Item 15</td>
</tr>
</tbody>
</table>
</div>
<div class="gra-pagination" data-items-per-page="4" data-total-items="" data-element-id="tableTest">
<div class="results">
<span class="fromIndex">1</span> de <span class="showRows">10</span> dos <span class="totalRows"></span> resultados
</div>
<div class="resultsMobile">
<span class="fromIndex">1</span> de <span class="showRows">10</span> dos <span class="totalRows"></span>
</div>
<div class="navigation">
<button class="prev icon icon-secondary"><i class="icon-chevron-left iconLeft"></i></button>
<div class="page-numbers"></div>
<button class="next icon icon-secondary"><i class="icon-chevron-right iconRight"></i></button>
</div>
</div>