Jump to content
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!  

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Sapinn
      Tô fazendo esse forum pq não achei nada que me ajudasse. Tenho um site em que os professores dão temas para as usuarios produzirem textos, basicamente um site de historias. Preciso que o aluno saiba se ja fez um texto sobre aquele determinado tema. Sendo assim tenho duas tabelas no meu banco usuario que cadastra todos os usarios e historia que tem o tema. Quando o aluno vai enviar a historia automaticamente envia seu email. O que eu realmente quero é comparar se o email existe nas duas tabelas se sim ele retorna já foi feito se não ele retorna Nada feito ainda.
    • By _FelipeOlvr
      Oi pessoal, blz?
       
      Bom, passei quase a tarde toda pra fazer o seguinte:
       
      Imagina que o body tem scroll Y.
      agora imagina que no meio do body tem um elemento que tem scroll no sentido X ( <--------> ).
       
      Minha dúvida é a seguinte: Como eu faço pra que, quando eu colocar o mouse em cima desse elemento que sofre scroll no sentido X, o scroll passe a acontecer nele, e não mais no body.
       
      ( Eu sei que se segurar o SHIFT e girar a rodinha do mouse, o scroll acontece somente nele. Mas eu queria tentar isso, pra dar um trabalho a menos pro usuário )
       
      Fiz um layout básico pra simular o layout em que quero fazer isso. Segue:
       
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> JS | Scroll </title> <style> body { min-height: 200vh ; display: flex ; flex-direction: column ; justify-content: center ; } .container-scroll-x { background-color: rgb(219, 237, 240) ; padding: 50px ; } .content { background-color: rgb(127, 189, 207) ; overflow-x: auto ; white-space: nowrap ; padding: 30px ; } </style> </head> <body> <div class="container-scroll-x"> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. </div> </div> </body> </html> Desde já agradeço a ajuda.
       
       
    • By eduardaarosaa
      Estou tentando fazer um validador de idade, mas meu onclick não está retornando como o esperado. O caminho para o aquivo externo está correto, já testei com um alert.
       
      Meu HTML:
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Verificador de Hora</title>
          <link rel="stylesheet" type="text/css" href="style/style.css">
      </head>
      <body>
          <header>
              <h1>Verificador de Idade</h1>
          </header>
          <section>
              <div>
                  <p>Ano de nascimento:
                      <input type="number" name="txtnumber" id="txtano">
                  </p>
                  <p>
                      Sexo:
                      <input type="radio" name="radiosex" id="masc" checked>
                      <label for="masc">Masculino</label>
                      <input type="radio" name="radiosex" id="fem" >
                      <label for="fem">Feminino</label>
                  </p>
                  <p>
                      <input type="button" value="Verificar" onclick="verificar()">
                  </p>
                 
              </div>
              <div id="res">
                  Preencha os campos e veja o resultado.
              </div>
          </section>
          <footer>
              <p>&copy; Eduarda Rosa</p>
          </footer>
          <script src="script/script.js"></script>
      </body>
      </html>
       
      e o JS: 
       
      function verificar(){
          var data = new Date();
          var ano = data.getFullYear();
          var fano = document.getElementById('txtano');
          var res = document.querySelector('div#res');
          if(fano.Value.length == 0 || fano.value > ano){
              window.alert("Error, verifique os dados e tente novamente!");
          }else{
              window.alert("Ok");
          }
      }
       
       
    • By Kellyfer
      Ola estou tentando publicar imagens multilas usando o comando FOR mas nao estou acertando, alguem poderia me ajudar??
      /*script*/
      <?php 
      date_default_timezone_set('America/Sao_Paulo');
      session_start();?> 
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <title>Upload de Imagens</title>
      </head>
      <body>
      <!--FORMULÁRIOS-->
      <form action="upload.php" method="post" enctype="multipart/form-data">
          <input type="file" name="arquivos[]" multiple required>
          <input type="submit" value="Publicar">
      </form>
      <p>
      <?php 
      if(isset($_SESSION['erro'])):
          echo $_SESSION['erro'];
          session_unset();
      elseif(isset($_SESSION['sucesso'])):
          echo $_SESSION['sucesso'];
          session_unset();
      endif;
      ?>
      </p>
      <?php 
      /*MOSTRANDO AS IMAGENS NA TELA*/
      $utf8 = header("content-type:text/html;charset= utf-8");
      $conn = new mysqli('localhost','thesim','xthesimx1986','db_galeria');
      $conn->set_charset("utf8");
      $busca_image = "SELECT id, nome_arquivo FROM tb_upload  ORDER BY id DESC";
      $res = mysqli_query($conn, $busca_image);
       if(mysqli_num_rows($res) <= '0'){
           echo "Nenuma imagem encontrada!";
       }else{
           while($res_pos =mysqli_fetch_array($res)){
               $nome_arquivo    =$res_pos[0];
      for($c=0; $c>=10; $c++);
      print "<div class='foto'><img src='uploads/$nome_arquivo$c</div>";
      }
      }
      ?>
      </body>
      </html>
      Imagens anexadas



    • By tatysouzac
      Minha view:
      <div>                            
                                          <form method="post" action="http://localhost/integradorcode/index.php/welcome/validar">
                                          EMAIL: <input type="text" name="email"  /> <br><br>
                                          SENHA:  <input type="password" name="senha"/> <br><br><br><br>
                                          <input class="myButton" type="submit" value="Entrar"/> <br><br>
                                          </form>
                                          <a href="Cadastro.php" class="myButton">Cadastrar</a><br><br>
                                          <a href="#" class="myButton">Esqueceu sua senha?</a>
               </div>
       
       
       
      Controller:
       
          public function validar(){
              //var_dump($_POST);
              $this->load->model("Cadastro_model");
              $result = $this->Cadastro_model->validar($_POST["email"],md5($_POST["senha"]));
              var_dump($result);
          }
       
       
      Model:
       
          function validar($email, $senha){
              return $this->db->query("SELECT * FROM `cadastro_clientes` WHERE email_cliente = '{$email}'  AND senha_cliente = '{$senha}' AND status = 1 LIMIT 1")->result_array();
          }
       
       
      Não da nenhuma mensagem de erro mas coloco senha e login certos do meu bd e o return não retorna nada array 0 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.