0

DataTables: Busca, filtragem, paginação e estilização de tabelas

#PHP #CSS
Jose Silva
Jose Silva

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:


<!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>

antes que alguém mencione esses números são ficticios.


arquivos ta no github .

segue no linkedin .

1
10

Comentários (1)

aprendendo para viver e vivendo para aprender.

Brasil