Explorando o List.js: Guia Completo para Implementar Busca, Ordenação e Paginação – Blog – Devdata Sistemas

Se você precisa adicionar funcionalidades de busca, ordenação e paginação a listas ou tabelas em HTML, o List.js é uma solução leve, eficiente e fácil de usar. Neste post, vamos explorar como configurar e personalizar o List.js para atender às suas necessidades.

O que é o List.js?

O List.js é uma biblioteca em JavaScript que permite adicionar, de forma simples, funcionalidades como:

Busca em tempo real.
Ordenação dinâmica de dados.
Paginação de conteúdo.
Integração com listas e tabelas HTML.

Por ser muito leve, é ideal para aplicações onde você não quer carregar bibliotecas pesadas como o DataTables.

Passo a Passo: Como Implementar o List.js

1. Incluindo o List.js no Projeto

Você pode adicionar o List.js ao seu projeto com um link CDN ou baixando os arquivos:

<!-- Inclua o List.js no <head> ou antes do fechamento do <body> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>

2. Estrutura HTML Básica

O List.js trabalha com listas e tabelas. Aqui está um exemplo de tabela HTML:

<div id="customers">
  <input class="search" placeholder="Buscar" />
  <table>
    <thead>
      <tr>
        <th class="sort" data-sort="item-title">Título</th>
        <th class="sort" data-sort="item-progress">Progresso</th>
        <th class="sort" data-sort="item-status">Status</th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <td class="item-title">Projeto A</td>
        <td class="item-progress">50%</td>
        <td class="item-status">Em andamento</td>
      </tr>
      <tr>
        <td class="item-title">Projeto B</td>
        <td class="item-progress">75%</td>
        <td class="item-status">Concluído</td>
      </tr>
    </tbody>
  </table>
  <ul class="pagination"></ul>
</div>

id="customers": O elemento pai que agrupa tudo.
class="search": Um campo de busca em tempo real.
class="sort" e data-sort: Colunas ordenáveis.
class="list": Define quais itens o List.js deve manipular.

3. Configurando o List.js

Agora, adicione o JavaScript para ativar as funcionalidades:

<script type="text/javascript">
  var options = {
    valueNames: ['item-title', 'item-progress', 'item-status'],
    page: 5, // Define o número de itens por página
    pagination: true // Ativa a paginação
  };

  var customerList = new List('customers', options);
</script>

valueNames: Lista de classes HTML que podem ser pesquisadas ou ordenadas.
page: Define o número de itens exibidos por página.
pagination: Ativa a paginação automática.

Personalizando o List.js

Adicionando Paginação com Classes Personalizadas

Você pode definir uma classe para estilizar a paginação:

var options = {
  valueNames: ['item-title', 'item-progress', 'item-status'],
  page: 5,
  pagination: {
    paginationClass: 'custom-pagination' // Define a classe CSS personalizada
  }
};

Então, no seu CSS:

.custom-pagination li {
  display: inline-block;
  margin: 0 5px;
}

.custom-pagination .active {
  font-weight: bold;
  color: red;
}

Adicionando Filtros Dinâmicos

Você pode adicionar botões para filtrar os itens:

<button onclick="customerList.filter(item => item.values().item-status === 'Concluído')">Filtrar Concluídos</button>
<button onclick="customerList.filter()">Mostrar Todos</button>

Lidando com Problemas Comuns

Conflito com Outras Bibliotecas:
- Certifique-se de que não há conflito de nomes de classes ou IDs no seu projeto.
Busca ou Ordenação Não Funciona:
- Verifique se as classes especificadas em valueNames estão presentes no HTML.
Não Exibe Itens por Página:
- Certifique-se de que o elemento HTML de paginação (é definido pela classe .pagination) está configurado corretamente.

Conclusão

O List.js é uma ferramenta incrível para adicionar funcionalidades às suas listas e tabelas sem complicar o projeto. É altamente customizável e muito leve, ideal para projetos que precisam de simplicidade e eficiência.

Experimente integrar o List.js no seu próximo projeto e veja como ele facilita a vida do usuário final. Se precisar de ajuda ou inspiração, deixe seus comentários abaixo!