Filtro de exibição e paginação

Exibição de navegação por páginas e controle de quantidade.

Navegação entre páginas e controle de quantidade de elementos que serão exibidos por página.

Exibir

ítens por página

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="ls-pagination-filter">
  <ul class="ls-pagination">
    <li><a href="#">&laquo; Anterior</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Próximo &raquo;</a></li>
  </ul>

  <div class="ls-filter-view">
      Exibir
    <div class="ls-custom-select">
      <select name="" id="" class="ls-select">
        <option value="10">10</option>
        <option value="30">30</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </div>
      ítens por página
  </div>
</div>

Paginação com muitos elementos

Quando houver mais de 5 páginas, utilizamos um span com a classe .ls-gap para especificar que há mais páginas.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="ls-pagination-filter">
  <ul class="ls-pagination">
    <li><a href="#">&laquo; Anterior</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><span class="ls-gap">...</span></li>
    <li><a href="#">Próximo &raquo;</a></li>
  </ul>
</div>

Estados Ativado e Desativado

Customize os links em diferentes circunstâncias. Utiliza a classe .ls-disabled para links desativados e .ls-active para indicar uma próxima página.

1
2
3
4
5
6
7
8
9
10
11
<div class="ls-pagination-filter">
  <ul class="ls-pagination">
    <li class="ls-disabled"><a href="#">&laquo; Anterior</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="ls-active"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Próximo &raquo;</a></li>
  </ul>
</div>

Tamanhos

Para alterar o tamanho, utilize as classes .ls-pagination-lg ou .ls-pagination-sm.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="ls-pagination-filter">
  <ul class="ls-pagination-sm">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="ls-active"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

<div class="ls-pagination-filter">
  <ul class="ls-pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="ls-active"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

<div class="ls-pagination-filter">
  <ul class="ls-pagination-lg">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="ls-active"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

Pager

Links rápidos para uma simples implementação de paginação com links de anterior e próximo.

1
2
3
4
<ul class="ls-pager">
  <li><a href="#">&laquo;  Anterior</a></li>
  <li><a href="#">Próximo &raquo;</a></li>
</ul>

Links Alinhados

Você tem a opcão de alinhar um de cada lado

1
2
3
4
<ul class="ls-pager">
  <li class="ls-previous"><a href="#">&laquo; Anterior</a></li>
  <li class="ls-next"><a href="#">Próximo &raquo;</a></li>
</ul>

Estado desabilitado opcional

Esses links também usam a classe .ls-disabled que é uma utilidade da paginação.

1
2
3
4
<ul class="ls-pager">
  <li class="ls-previous ls-disabled"><a href="#">&laquo; Anterior</a></li>
  <li class="ls-next"><a href="#">Próximo &raquo;</a></li>
</ul>

Locaweb Style

Documentação