Já pensou adicionar paginação, busca, filtragem, ordenação e ainda estilização em tabelas HTML com apenas algumas linhas de código? Graças ao DataTables isso é rápido e fácil.

Tudo o que você precisa fazer é acessar o site do plugin e copiar as informações presentes na página inicial.

  1. Adicionar o jQuery na sua página.
  2. Adicionar o link pro css do datatables.
  3. Adicionar o link pro javascript.
  4. Referenciar a tabela através do atributo ID.
  5. Adicionar o código de tradução para PT-BR.

Pronto! O código HTML abaixo exemplifica os passos acima:

[sociallocker]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sua Página</title>

  <link href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet">

</head>
<body>
  
  <table id="minhaTabela">
    <thead>
      <tr>
        <th>Nome</th>
        <th>E-mail</th>
        <th>Telefone</th>
        <th>Ação</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Vinicius Moura</td>
        <td>viniciusmouramail@gmail.com</td>
        <td>49 12345-68791</td>
        <td><a href="">Deletar</a></td>
      </tr>
      <tr>
        <td>José Andrade</td>
        <td>joseandrade@gmail.com</td>
        <td>32 9875-68791</td>
        <td><a href="">Deletar</a></td>
      </tr>
      <tr>
        <td>Rodrigo Costa</td>
        <td>rodrigocosta@gmail.com</td>
        <td>32 4564-68791</td>
        <td><a href="">Deletar</a></td>
      </tr>
    </tbody>
  </table>
  
  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

  <script>
  $(document).ready(function(){
      $('#minhaTabela').DataTable({
        	"language": {
                "lengthMenu": "Mostrando _MENU_ registros por página",
                "zeroRecords": "Nada encontrado",
                "info": "Mostrando página _PAGE_ de _PAGES_",
                "infoEmpty": "Nenhum registro disponível",
                "infoFiltered": "(filtrado de _MAX_ registros no total)"
            }
        });
  });
  </script>
  
</body>
</html>
[/sociallocker]

Além disso, você também pode fazer a integração nativa do plugin do com o Twitter Bootstrap, no vídeo abaixo explicamos o processo completo: