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!
