Como adicionar Detalhe de Linha na Datatable

[leo_santo1 0]

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!  

[oliveiros 1]

Saudações!
O que eu posso dizer, já que sua estrutura não funcionou aqui comigo...

Sua estrutura é semelhante a esta:https://forum.imasters.com.br/topic/582946-botão-excluir-e-editar-em-um-datatable/

 

Com esta também não funcionou, mas ainda assim apareceu a paginação, total de registros, etc. Só não listou os dados. com a sua não só aparece os campos cpf, nome, data de nascimento.

Estou utilizando esta estrutura, que além de funcionar perfeitamente, me parece ser mais legível, fácil entendimento e eficiente na busca no banco de dados:

https://makitweb.com/datatables-ajax-pagination-with-search-and-sort-php/

[oliveiros 1]

Quero compartilhar a configuração do meu

<!doctype html>
<html>
    <head>
        <title>DataTables AJAX Pagination with search and sort - PHP</title>
         <link href='datatables/css/datatables.min.css' rel='stylesheet' type='text/css'>
		<link href='datatables/css/buttons.dataTables.min.css' rel='stylesheet' type='text/css'>
		<link href='datatables/css/colReorder.dataTables.min.css' rel='stylesheet' type='text/css'>
		<link href='datatables/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>
		 <!-- jQuery Library -->
        <script src="jquery-3.3.1.min.js"></script>
        <!-- Datatable JS -->
        <script src="datatables/js/jquery.dataTables.min.js"></script>
		<script src="datatables/js/dataTables.buttons.min.js"></script>
		<script src="datatables/js/dataTables.colReorder.min.js"></script>
		<script src="datatables/js/buttons.colVis.min.js"></script>
		<script src="datatables/js/buttons.print.min.js"></script>
        	<style>
		div.dt-buttons {
        clear: both;
    }
	</style>
    </head>
    <body >

	<button type='button' id='fechar_vendas'>Fechar</button>
	<button type='button' id='ver_produtos' name='ver_produtos2'>Ver produtos</button>
    <button type='button' id='imprimirajax'>Imprimir comanda</button>
	<button type='button' id='imprimirajax2'>Imprimir comanda R$</button>
	
        <div>
            <!-- Table -->
            <table id='empTable' class='display dataTable'>
               
                <tr>
				 <thead>
                    <th>Data</th>
                    <th>Hora</th>
                    <th>Senha</th>
                    <th>Dinheiro</th>
                    <th>Total</th>
					<th>Trouco</th>
					<th>T_PGTO</th>
					<th>Impressão</th>
					<th></th>
			    </tr>
                </thead>
                
            </table>
        </div>
     
        <!-- Script -->
        <script>
        $(document).ready(function(){
            $('#empTable').DataTable({
			"order": [[ 0, "desc" ]],
	  dom: 'Blfrtip',
	  stateSave: true,
	  buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
             ],
        buttons: ['columnsToggle', 'print',
		
            {
                extend: 'colvis',
                postfixButtons: [ 'colvisRestore' ],
            },
        ],
		 buttons: [
            {
                extend: 'print',
                exportOptions: {
                    columns: ':visible'
                }
            },
            'colvis'
        ],
		 language: {
            buttons: {
                colvis: 'Esconder / mostrar colunas',
				colvisRestore: 'Restaurar coluna(s)'
            }
        },
        columnDefs: [
            {
                targets: -1,
                visible: false
            }
        ],
    'columnDefs': [3],	 
    retrieve: true,
    "iDisplayLength": 3,
    "aaSorting": [3],
	"lengthMenu": [[3,4,10, 25, 50, -1], [3,4,10, 25, 50, "All"]],
    "lengthChange": true,
	columnDefs: [ { orderable: false, targets: [7,8] }], 
    //{ visible: false, targets: [7,8] } ],
			 "pagingType": "full_numbers",
			    'colReorder': true,
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                'ajax': {
                    'url':'ajaxfile.php'
                },
                'columns': [
                    { data: 'DATA_VENDA' },
                    { data: 'HORA_VENDA' },
                    { data: 'SENHA' },
                    { data: 'PAGO' },
                    { data: 'VALOR_TOTAL' },
					{ data: 'TROUCO' },
					{ data: 'TPAGAMENTO' },
					{ data: 'button' },
					{ data: 'produtos' },
                ]
            });
        });
		$.extend(true, $.fn.dataTable.defaults, {
    "language": {
        "url": "datatables/pt.json"
    }
});
        </script>
    </body>

</html>

	<script>
//Seleciona o botão
var btn = document.getElementById('fechar_vendas');

//Adiciona uma chamada quando o elemento (botão no caso) for clicado, chamando a função 'ocultar'
btn.addEventListener('click', ocultar)

//Definimos a função a ser chamada quando o botão for clicado
function ocultar(){
   var msg = document.getElementById('vendas2'); //  seleciona a div com o texto
   //msg.style.display = 'none'; // oculta a div
   //this.style.display = 'none'; // oculta o botão
    if (msg.style.display == 'none') {
            msg.style.display = 'block';
        } else {
            msg.style.display = 'none';
			 this.style.display = 'none';
        }
  
}
</script>
</script>
<!-- ABAIXO MOSTRO A DIV vendas2 SE ELA ESTIVER OCULTA-->
<script>
var visivel = false;
var objDiv = document.getElementById('vendas2');     
   if (visivel == false){
      objDiv.style.display = "block"; 
      visivel = true;             
   }else{
      objDiv.style.display = "none";
      visivel = false;         
}
</script>
<script>
$(document).ready(function() {
   //definir evento "onclick" do botão id=ver_produtos
   $("#ver_produtos").click(function() {
      //capturar o valor dos campos do fomulario
	  var cod  = $("input[name=prod]:checked").val();
	 var acao =  $(this).attr('id');
      //usar o metodo ajax da biblioteca jquery para postar os dados em ver_produtos.php
      $.ajax({
         "url": "ver_produtos.php",
         "dataType": "html",
         "data": {           
			"cod":cod,
			"acao":acao
         },
         "success": function(response) {
            //em caso de sucesso, a div ID=produtos2 recebe o response do post
            $("div#produtos2").html(response);
         }
      });
   });
});
</script>
<script>
$(document).ready(function() {
   //definir evento "onclick" do campo acao
   $("#imprimirajax").click(function() {
      //capturar o valor dos campos do fomulario
	  var CODIGO  = $("input[name=prod]:checked").val();
	 //var acao =  $(this).attr('id');
      //usar o metodo ajax da biblioteca jquery para postar os dados em ver_produtos.php
      $.ajax({
         "url": "venda.php",
         "dataType": "html",
         "data": {           
			"CODIGO":CODIGO
			//"acao":acao
         },
         //"success": function(response) {
            //em caso de sucesso, a div ID=saida recebe o response do post(div em outra página)
           // $("div#produtos2").html(response);
         //}
      });
   });
});
</script>
<script>
$(document).ready(function() {
   //definir evento "onclick" do imprimirajax2
   $("#imprimirajax2").click(function() {
      //capturar o valor dos campos do fomulario
	  var CODIGO  = $("input[name=prod]:checked").val();
	 //var acao =  $(this).attr('id');
      //usar o metodo ajax da biblioteca jquery para postar os dados em ver_produtos.php
      $.ajax({
         "url": "comanda_venda.php",
         "dataType": "html",
         "data": {           
			"CODIGO":CODIGO
			//"acao":acao
         },
         //"success": function(response) {
            //em caso de sucesso, a div ID=saida recebe o response do post
            //$("div#produtos2").html(response);
         //}
      });
   });
});
</script>