Ir para conteúdo
leo_santo1

Como adicionar Detalhe de Linha na Datatable

Recommended Posts

Venho por meio desse post procurar ajuda com meu código!

Estou fazendo um código usando `DataTable` , sou iniciante na programação, depois de umas pesquisas e até mesmo algumas dicas conseguir construir uma DataTable com banco de dados.

Continuando minhas pesquisas para aprimorar mais ainda o código, percebi que a  `DataTable` possuir varias funções interessantes, umas delas em especifico chamou bastante minha atenção e até me ajudaria no código que no caso é o uso de Linhas filhas ocultas, que quando fazemos o click em cima de um botão aparece as informações extras da linha ( no caso os dados a mais do banco ) e ao apertar ela novamente ele oculta as informações.

Gostaria de ajuda para criar essa função na minha Tabela, já realizei pesquisas no próprio site da  `DataTable` , aqui, porem não entendo bem o jeito que eles explicam.

segue abaixo meu código da table e da  `DataTable` que conecta com o Banco.

 

Tabela

<table id="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
 <thead>
<tr>
  <th>Nome</th>
  <th>CPF</th>
  <th>Data de Nascimento</th>
  <th></th>
  <th>Ação</th>
  <th></th>
</tr>
</thead>

<thead>
            <tr>

              <td><input type="text" data-column="0"  class="search-input-text" style="width: 150px;"></td>
              <th><input type="text"  data-column="1" class="search-input-text" style="width: 150px;"></td>
                <th><input type="text" id="data" data-column="2" class="search-input-text" style="width: 150px;"></th>
                <th></th>
              <td>
              </td>
              <td></td>
            </tr>
          </thead>


</table>

Script DataTable

  $(document).ready(function() {
                var dataTable = $('#employee-grid').DataTable( {
                    "processing": true,
                    "serverSide": true,
                    "bJQueryUI": true,
                "oLanguage": {
                    "sProcessing":   "Processando...",
                    "sLengthMenu":   "Mostrar _MENU_ registros",
                    "sZeroRecords":  "Não foram encontrados resultados",
                    "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
                    "sInfoFiltered": "",
                    "sInfoPostFix":  "",
                    "sSearch":       "Buscar:",
                    "sUrl":          "",
                    "oPaginate": {
                        "sFirst":    "Primeiro",
                        "sPrevious": "Anterior",
                        "sNext":     "Seguinte",
                        "sLast":     "Último"
                    }
                },
                    "ajax":{
                        url :"../Tabelas/Tabela_consulta_cliente.php", // json datasource
                        type: "post",  // method  , by default get
                        error: function(){  // error handling
                            $(".employee-grid-error").html("");
                            $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                            $("#employee-grid_processing").css("display","none");

                        }
                    }
                } );

                $("#employee-grid_filter").css("display","none");  // hiding global search box
                $('.search-input-text').on( 'keyup click', function () {   // for text boxes
                    var i =$(this).attr('data-column');  // getting column index
                    var v =$(this).val();  // getting search input value
                    dataTable.columns(i).search(v).draw();
                } );

                $('.search-input-select').on( 'change', function () {   // for select box
                    var i =$(this).attr('data-column');  
                    var v =$(this).val();  
                    dataTable.columns(i).search(v).draw();
                } );



            } );

Conexão DataTable com o Banco de dados

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "loc_equipamentos";

$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());





$requestData= $_REQUEST;


$columns = array( 

    0=>'nome_usuario', 
    1=> 'cpf_usuario',
    2=> 'data_nascimento',
    3=> 'id_usuario',
    4=> 'id_usuario',
    5=> 'id_usuario'
);




$sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario ";
$sql.=" FROM usuario";
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData; .




$sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario ";
$sql.=" FROM usuario WHERE tipo_perfil = 'CLIENTE' AND ativo_usuario = 'TRUE'";


if( !empty($requestData['columns'][0]['search']['value']) ){   
    $sql.=" AND nome_usuario LIKE '".$requestData['columns'][0]['search']['value']."%' ";
}
if( !empty($requestData['columns'][1]['search']['value']) ){ 
    $sql.=" AND cpf_usuario LIKE '".$requestData['columns'][1]['search']['value']."%' ";
}
if( !empty($requestData['columns'][2]['search']['value']) ){ //age

    $sql.=" AND data_nascimento LIKE '".$requestData['columns'][2]['search']['value']."%' ";
}
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$totalFiltered = mysqli_num_rows($query);
$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]."   ".$requestData['order'][0]['dir']."   LIMIT ".$requestData['start']." ,".$requestData['length']."   ";

$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");



$data = array();
while( $row=mysqli_fetch_array($query) ) { 
    $nestedData=array(); 

$informacao ="<div class='botaodiv'> <a  href = ?informacao=".$row['id_usuario']." >+ Informações</a> </div>";
$editar ="<div class='botaodiv'> <a  href = ?editar=".$row['id_usuario']." >Editar</a> </div>";
$deletar ="<div class='botaodiv'> <a  href = ../Eventos/evento.php?DesativaCadastro=".$row['id_usuario']." >Excluir</a> </div>";

    $nestedData[] = $row["nome_usuario"];
    $nestedData[] = $row["cpf_usuario"];
    $nestedData[] = $row["data_nascimento"];
    $nestedData[] = $informacao;
    $nestedData[] = $editar;
    $nestedData[] = $deletar;

    $data[] = $nestedData;
}



$json_data = array(
            "draw"            => intval( $requestData['draw'] ), 
            "recordsTotal"    => intval( $totalData ), 
            "recordsFiltered" => intval( $totalFiltered ),
            "data"            => $data   
            );

echo json_encode($json_data);  



?>

Fora o caso de criar Detalhes para Linhas, Caso alguém tenha alguma sugestão de como melhorar meu código ( por exemplo uma Conexão ao Banco mais simples, um Js melhor etc.. ) ou alguma critica para eu evoluir, irei agradecer bastante!  

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Bruno123
      Olá, estou com uma dúvida na hora  de retornar se o número é primo ou não, poderiam me ajudar por gentileza ? Obrigado !
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="javascript.js"></script> </body> </html> 'use strict' let num = prompt("Insira um número:"); let c = 0; for (i = 1; i <= num; i++) { if (num % i == 0) { c++; } } if (c == 2) { alert ("É PRIMO") } else { alert("NÃO É PRIMO") }  
    • Por BTK
      Boa noite, estou tentando criar um curl que faz cadastro no site(o proprietário está ciente disso) porem ele está me retornando (HTTP/1.1 100 Continue HTTP/1.1 302 Moved Temporarily)

       $ch = curl_init();   
          
                                                                                                                     
          curl_setopt($ch, CURLOPT_URL, "https://www.cafefacil.com.br/customer/account/create/");                                     
          curl_setopt($ch, CURLOPT_HEADER, true);                                                                                                   
          curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36');                                                                                                                                               
          curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);                                                                                         
          curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);                                                                                       
          curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);                                                                                       
          curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);  
          curl_setopt($ch, CURLOPT_COOKIESESSION, true);                                                                             
          curl_setopt($ch, CURLOPT_COOKIEJAR, getcwd().'/cafefacil.txt');
          curl_setopt($ch, CURLOPT_COOKIEFILE, getcwd().'/cafefacil.txt'); 
          
          
          
          
          $b1 = curl_exec($ch);
          
          $form_key = value($b1, 'type="hidden" name="form_key" value="', '"');
          
          curl_setopt($ch, CURLOPT_URL, 'https://www.cafefacil.com.br/customer/account/createpost/');                                     
          curl_setopt($ch, CURLOPT_HEADER, true);                                                                                                   
          curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36');                                                                                                                                                  
          curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);                                                                                         
          curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);                                                                                    
          curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);                                                                                       
          curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
          curl_setopt($ch, CURLOPT_COOKIESESSION, true);   
          curl_setopt($ch, CURLOPT_REFERER, 'https://www.cafefacil.com.br/customer/account/create/');                                                                           
          curl_setopt($ch, CURLOPT_COOKIEJAR, getcwd().'/cafefacil.txt');
          curl_setopt($ch, CURLOPT_COOKIEFILE, getcwd().'/cafefacil.txt'); 
          curl_setopt($ch, CURLOPT_POST, 1);                                                                                                    
          $boundary = '---------------------------WebKitFormBoundaryRQ3KHJbpfmPf11v6';
          
          $data = '-----------------------------'.$boundary.'
          Content-Disposition: form-data; name="success_url"
          
          
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="error_url"
          
          
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="form_key"
          
          '.$form_key.'
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="tipopessoa"
          
          15
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="firstname"
          
          NomeTest SobreNomeTest
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="nomefantasia"
          
          
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="inscricaoestadual"
          
          
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="email"
          
          nometestsobrenometest@gmail.com
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="day"
          
          01
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="month"
          
          01
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="year"
          
          1990
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="dob"
          
          01/01/1990
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="taxvat"
          
          199.758.750-50
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="celular"
          
          (11)4712-8491
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="password"
          
          senhatest
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="confirmation"
          
          senhatest
          -----------------------------'.$boundary.'
          Content-Disposition: form-data; name="persistent_remember_me"
          
          on
          -----------------------------'.$boundary.'--';
          
          $header[] = "Content-Type: multipart/form-data; boundary=".$boundary;
          curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
          curl_setopt($ch, CURLOPT_POSTFIELDS, $data); 
          
            
          echo $exec = curl_exec($ch);
          curl_close($ch);
    • Por user32
      Olá pessoal,
      sempre fui um curioso na programação e agora estou começando entender o javascript.
       
      edit:
      como eu consiguiria fazer a variavel buscar alem de 9... como numeros como 10-20, 20-30 ?
      toda ajuda é bem vinda, desde já agradeço
       
       
      <script type="text/javascript"> function funcao1() { var num1 = Number(document.getElementById("num1").value); var elemResult = document.getElementById("total"); var d90 = /[0-3]/; var d80 = /[4-5]/; var d70 = /[6-9]/; if (d90.test(num1)) { elemResult.innerText = String(num1 * "1") + "."; } else if (d80.test(num1)) { elemResult.innerText = String(num1 * "2") + "."; } else if (d70.test(num1)) { elemResult.innerText = String(num1 * "3") + "."; } else { // IE elemResult.innerText = String(num1 * "5") + "."; } } </script>  
    • Por allencar.limma
      Tento incluir as informações de um formulário no banco de dados e não consigo. conforme código abaixo.
      <? /*Incluir as informações no formulario */ include "config.php"; $nome = trim($_POST['nome']); $masp = trim($_POST['masp']); $cpf = trim($_POST['cpf']); $telefone = trim($_POST['telefone']); $email = trim($_POST['email']); $endereco = trim($_POST['endereco']); $data_nascimento = trim($_POST['data_nascimento']); $unidade_lotacao = trim($_POST['unidade_lotacao']); /* Vamos checar algum erro nos campos */ if ((!$nome) || (!$masp) || (!$cpf) || (!$telefone) || (!$email) || (!$endereco) || (!$data_nascimento) || (!$unidade_lotacao)){ echo "ERRO: <br /><br />"; if (!$nome){ echo "Nome Completo é requerido.<br />"; } if (!$masp){ echo "Masp é requerido.<br />"; } if (!$cpf){ echo "CPF é requerido.<br /)>"; } if (!$telefone){ echo "Telefone é requerido.<br />"; } if (!$email){ echo "Email é requerido.<br />"; } if (!$endereco){ echo "Endereço é requerido.<br />"; } if (!$data_nascimento){ echo "Data de Nascimento é requerido.<br />"; } if (!$unidade_lotacao){ echo "Unidade de Lotação é requerido.<br>"; } echo "Preencha os campos abaixo: <br />"; include "formulario_cadastro.php"; }else { /* Vamos checar se o nome de Usuário escolhido e/ou Email já existem no banco de dados */ $sql_email_check = mysql_query( "SELECT COUNT(usuario_id) FROM usuarios WHERE email='{$email}'" ); $sql_masp_check = mysql_query( "SELECT COUNT(usuario_id) FROM usuarios WHERE masp='{$masp}'" ); $sql_cpf_check = mysql_query( "SELECT COUNT(usuario_id) FROM usuarios WHERE cpf='{$cpf}'" ); $eReg = mysql_fetch_array($sql_email_check); $uReg = mysql_fetch_array($sql_masp_check); $uReg = mysql_fetch_array($sql_cpf_check); $email_check = $eReg[0]; $masp_check = $uReg[0]; $cpf_check = $uReg[0]; if (($email_check > 0) || ($masp_check > 0) || ($cpf_check > 0)){ echo "<strong>ERRO</strong>: <br /><br />"; if ($email_check > 0){ echo "Este email já está sendo utilizado.<br /><br />"; unset($email); } if ($masp_check > 0){ echo "Este Masp já está sendo utilizado.<br /><br />"; unset($masp); } if ($cpf_check > 0){ echo "Este CPF já está sendo utilizado.<br /><br />"; unset($cpf); } include "formulario_cadastro.php"; }else{ /* Se passarmos por esta verificação ilesos é hora de finalmente cadastrar os dados. Vamos utilizar uma função para gerar a senha de forma randômica*/ function makeRandomPassword(){ $salt = "abchefghjkmnpqrstuvwxyz0123456789"; srand((double)microtime()*1000000); $i = 0; while ($i <= 7){ $num = rand() % 33; $tmp = substr($salt, $num, 1); $pass = $pass . $tmp; $i++; } return $pass; } $senha_randomica = makeRandomPassword(); $senha = md5($senha_randomica); // Inserindo os dados no banco de dados //$cpf = htmlspecialchars($cpf); ***RETIRADO PELO FATO DE NÃO ESTA SENDO USADO $sql = mysql_query( "INSERT INTO usuarios (none, masp, cpf, telefone, email, endereco, data_nascimento, unidade_lotacao) VALUES ('$nome', '$masp', '$cpf', '$telefone', '$email', '$endereco', '$data_nascimento', '$unidade_lotacao', now())") or die( mysql_error() ); if (!$sql){ echo "Ocorreu um erro ao criar sua conta, entre em contato."; }else{ $usuario_id = mysql_insert_id(); // Enviar um email ao usuário para confirmação e ativar o cadastro! $headers = "MIME-Version: 1.0\n"; $headers .= "Content-type: text/html; charset=iso-8859-1\n"; $headers .= "From: RCI - <rci@rcionline.com.br>"; $subject = "Confirmação de cadastro - www.rcionline.com.br"; $mensagem = "Prezado {$nome} {$masp},<br /> Obrigado pelo seu cadastro em nosso site, <a href='http://www.rcionline.com.br'> http://www.rcionline.com.br</a>!<br /> <br /> Para confirmar seu cadastro e ativar sua conta em nosso site, podendo acessar à áreas exclusivas, por favor clique no link abaixo ou copie e cole na barra de endereço do seu navegador.<br /> <br /> <a href='http://www.rcionline.com.br/ativar.php?id={$usuario_id}&code={$senha}'> http://www.rcionline.com.br/ativar.php?id={$usuario_id}&code={$senha} </a> <br /> <br /> Após a ativação de sua conta, você poderá ter acesso ao conteúdo exclusivo efetuado o login com os seguintes dados abaixo:<br > <br /> <strong>Usuario</strong>: {$usuario_id}<br /> <strong>Senha</strong>: {$senha_randomica}<br /> <br /> Obrigado!<br /> <br /> Webmaster<br /> <br /> <br /> Esta é uma mensagem automática, por favor não responda!"; mail($email, $subject, $mensagem, $headers); echo "Foi enviado para seu email - ( ".$email." ) um pedido de confirmação de cadastro, por favor verifique e sigas as instruções!"; } } } ?>  
    • Por GustavoJacob15
      tenho um case assim no meu fonte: 
      ---------------------------------------------------------
      CASE RA_DEMISSA
          WHEN '' THEN 'DESLIGADO'
          ELSE 'ATIVO'
      END AS SITUACAO
      ---------------------------------------------------------
       
      Preciso colocar no where para mostar um parametro com 'ativo' ou 'desligado' 
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.