Sou iniciante em algumas áreas da programação.
Recentemente me indicaram usar DataTable, fiz alguns teste usando Html
puro e li algumas coisas sobre. Os testes feitos com HTML
foram bem legais eu vi as funcionalidades, gostei bastante de como funciona. Porem, quando tentei usar junto com o PHP
, mais especificamente em uma pesquisa com banco de dados MYSQL, o resultado acabou sendo bem diferente do esperado e as funcionalidades principais acabaram não funcionando da mesma forma que no Html.
Isso ocorre pq a DataTable não funciona junto com Php, banco de dados MYSQL, ou pq tenho que fazer de uma forma diferente?
Algumas das funcionalidades que citei são:
- Quebrar pagina na tela e poder passar a mesma ( a principal no caso )
- Ao apertar na coluna fazer o filtro em ordem alfabética
- campo pesquisar... e etc.
segue o código que estou usando.
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.FixedHeader( table, {
alwaysCloneTop: true
});
} );
</script>
body { font-size: 140%; padding: 1em; }
div.FixedHeader_Cloned table { margin: 0 !important }
<html>
<head>
<title>Prologue by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main3.css" />
<!-- Scripts -->
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.bootstrap.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nome</th>
<th>CPF</th>
<th>Data de Nascimento</th>
<th colspan="3">Ações</th>
</tr>
</thead>
<?php
include_once "conexao.php";
$sql = "SELECT * FROM usuario WHERE tipo_perfil LIKE '%CLIENTE%'";
$result = mysqli_query($con,$sql);
if($result){
while($linha = mysqli_fetch_array($result)){
?>
<tbody>
<tr>
<td> <?php echo $linha['nome_usuario'];?></td>
<td> <?php echo $linha['cpf_usuario'];?></td>
<td> <?php echo $linha['data_nascimento'];?></td>
<td><div class="botaodiv"> <?php echo "<a href = ?editar=".$linha['id_usuario']." >+ Informações</a>";?></div></td>
<td><div class="botaodiv"> <?php echo "<a href = ?deletar=".$linha['id_usuario'].">Editar</a>";?></div></td>
<td><div class="botaodiv"> <?php echo "<a href = ?deletar=".$linha['id_usuario'].">Excluir</a>";?></div></td>
</tr>
</tbody>
<?php
}
}
?>
</table>