DataTables com Php

DataTables é um plugin do JQuery para automatização na construção de tabelas com Paginação. Cheia de recursos, ela pode ser personalizado de acordo com a necessidade do programador. Livre, pode ser baixado no proprio site: http://www.datatables.net, no site tem uma documentação que ajuda no desenvolvimento.

Para o plugin funcionar é necessario carrega-lo na pagina juntamente com o JQuery:

Via Html: 

<script src="js/jquery.js" type="text/javascript"></script>   
<script src="js/DataTables-1.7.6/jquery.dataTables.min.js" type="text/javascript"></script>

Carregar o css: carreguei do proprio demo do plugin, vc pode consegui-lo baixando a ultima versao deste plugin e copiando a pasta demo.

<link rel=’stylesheet’ href=’js/DataTables-1.7.6/css/demo_table_jui.css’ />   
<link rel=’stylesheet’ href=’js/DataTables-1.7.6/css/demo_table.css’ />  

Via MVC

$this->addScript("jquery.js");

$this->addScript("jquery/jquery.dataTables.min.js");

Dependendo do framework que vc utilize será necessário consultar a documentação para verificar com é possivel carregar scripts na pagina.

Após carregar é necessário inicializar o script

<script type="text/javascript">
        $(document).ready(function() {
            $(‘#teste’).dataTable( );
        } );
</script>

 

Criar a tabela Fisica no Html

<table id="teste" width="100%">
        <thead>
            <tr>
                <th>Nome</th>
                <th>Email</th>
                <th>Sexo</th>
                <th>Data Nascimento</th>
                <th>Nivel Escolar</th>
                <th>Faculdade</th>
            </tr>
        </thead>
        <tbody>
            <?php for( $i=0; $i<100; $i++ ){?>
            <tr>
                <td><?php echo $i;?></td>
                <td><?php echo $i+1;?></td>
                <td><?php echo $i+2;?></td>
                <td><?php echo $i+3;?></td>
                <td><?php echo $i+4;?></td>
                <td><?php echo $i+5;?></td>
            </tr>
            <?php }?>
        </tbody>
    </table>

 

Resultado na pagina:

 

exemplo de datatables

Anúncios

Sobre Alex Jose Silva

Mochileiro, Amante do MangueBit e apaixonado por TI.. Sou Alex, um sobrevivente!

Um Comentário

  1. Olá alex estou trabalhando com um projeto utilizando o Datatables tive uma dificuldade pelo que me parece quando você abre a página que gera a tabela funciona perfeitamente, estou com problema com registros tipo no meu banco de dados tem 30.000 registros e quando acessa a página ele carrega todos os registro e dá erro de script, com 100 registro funciona uma maravilha, mas com muitos dados dá erro, será que tem alguma solução de otimização pra isso? vlw e ótimo post

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: