Implementando o plugin DataTables do JQuery com PHP.
Nesta postagem segue um exemplo de implementação do plugin DataTable do JQuery integrado com o PHP. O plugin DataTable é uma ótima solução na hora de exibir uma lista de informações, a mesma possibilita ao usuário uma melhor navegação e organização dos dados. Segue a implementação de uma forma simples de uso deste plugin.
Javascript
|
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 |
<script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" class="init"> $(document).ready(function() { $('#example').dataTable({ "aaSorting": [[ 3, "asc" ]], "bPaginate": true, "bFilter": true, "sType": "brazilian", "aoColumns": [ { "sType": 'numeric' }, { "sType": 'text' }, { "sType": 'text' }, { "sType": 'text' }, { "sType": 'numeric' }, { "sType": 'numeric' }, { "sType": 'numeric' }, { "sType": 'text' }, { "sType": 'text' }, null ] }); } ); </script> |
No fonte acima realizo o import do plugin dataTable e do jquery e configuro o meu dataTable para ser associado a um elemento com o id “#example”, passando para o mesmo os seguintes parâmetros: aaSorting (ordem da lista), bPaginate (exibe a paginação), bFilter (exibe o filtro), sType (idioma do plugin), aoColumns(tipo das colunas da table, neste item devem ser definidas todas as colunas).
PHP
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<?php include("conn.php"); $query = "SELECT l.id, l.nome,l.apelido,c.nome,l.vitorias,l.derrotas,l.empates,l.ranking,l.nmpais FROM tb_lutador l, tb_categoria c WHERE c.id = l.id_categoria order by c.id"; $result = mysql_query($query) or die("Erro ao Executar a Query : ". mysql_error()); ?> <body class="dt-example"> <div class="container"> <section> <h1>Lutadores UFC</h1> <table id="example" class="display" cellspacing="0" width="80%" style="font-size: 1em;"> <thead> <tr> <th>#</th> <th width='250px'>Lutador</th> <th width='250px'>Apelido</th> <th>Categoria</th> <th>Vitórias</th> <th>Empate</th> <th>Derrotas</th> <th>Nº Rnk</th> <th>País</th> <th></th> </tr> </thead> <?php echo "<tbody>\n"; while ($row = mysql_fetch_array($result)) { echo "<tr>\n"; echo "<td>" . $row[0] . "</td> \n"; echo "<td width='250px'>" . $row[1] . "</td> \n"; echo "<td width='250px'>" . $row[2] . "</td> \n"; echo "<td>" . $row[3] . "</td> \n"; echo "<td>" . $row[4] . "</td> \n"; echo "<td>" . $row[5] . "</td> \n"; echo "<td>" . $row[6] . "</td> \n"; echo "<td>" . $row[7] . "</td> \n"; echo "<td><img src='flags/flag".$row[8].".png' width='25px' style='border:1; border-color:gaisnboro'> </td> \n"; echo "<td><a href='#'><img src='images/icons/configuracoes.png' width='15px'></a></td> \n"; echo "</tr>\n"; } echo "</tbody>\n"; ?> <tfoot> <tr> <th>#</th> <th width='250px'>Lutador</th> <th width='250px'>Apelido</th> <th>Categoria</th> <th>Vitórias</th> <th>Empate</th> <th>Derrotas</th> <th>Nº Rnk</th> <th>País</th> <th></th> </tr> </tfoot> </table> <?php mysql_close(); ?> </div> |
Por fim segue a tabela com os dados paginados.
Baixe o plugin no site oficial: https://datatables.net/
