Buenas, estoy intentado hacer mi kardex o historial de entrada y salida de mi producto. Pero tengo un problema. No quiero que al pasar a ver los detalles de un producto la pagina requiera recargarse. Sino ocultar la primera tabla(producto.php) donde se listan todos mis productos y mostrar la tabla donde se detalla el producto(histo.php) y un botón para retroceder y volver a ver la tabla original producto.php(obviamente).
Todo esto sin recargar mi pagina.
Tengo avanzado lo siguiente
Mi archivo producto.php
<?php
include('php/conexion.php');
$sql="SELECT * FROM producto";
$result=$conn->query($sql);
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>ID_Producto</th>
<th>nombre</th>
<th>peso/volumen</th>
<th>categoria</th>
<th>stock_min</th>
<th>precio</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
<?php
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr>
<td>".$row["id_producto"]."</td>
<td>".$row["nombre"]."</td>
<td>".$row["peso"]." ".$row["unidad_medida"]."</td>
<td>".$row["categoria"]."</td>
<td>".$row["stock_min"]."</td>
<td>".$row["precio"]."</td>
<td><a class='btn btn-info' role='button' href='histo.php?id=".$row['id_producto']."'><i class='fa fa-history' aria-hidden='true'></i> Historial</a></td>
</tr>";
}
}else{
echo "<tr><td colspan='100%'>No hay datos que Mostrar</td></tr>";
}
?>
</tbody>
</table>
</div>
</body>
</html>
Y me muestra esto:
y este es mi archivo histo.php
<?php
include('php/conexion.php');
$sql = "SELECT * FROM detalle_compra WHERE id_producto = '".$_GET["id"]."'";
$result=$conn->query($sql);
?>
<!DOCTYPE HTML>
<html lang="en-ES">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Descripcion</th>
<th>Id Producto</th>
<th>Cantidad</th>
<th>Fecha</th>
</tr>
</thead>
<tbody>
<?php
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$idcompra=$row["id_compra"];
echo "<tr>
<td>Entrada</td>
<td>".$row["id_producto"]."</td>
<td>".$row["cantidad"]."</td>";
$sql3="SELECT * FROM compra WHERE id_compra='$idcompra'";
$result3=$conn->query($sql3);
if($result3->num_rows>0){
while($row3=$result3->fetch_assoc()){
echo "<td>".$row3["fecha_emision"]."</td></tr>";
}
}
}
$sql2 = "SELECT * FROM detalle_venta WHERE id_producto = '".$_GET["id"]."'";
$result2=$conn->query($sql2);
if ($result2->num_rows > 0) {
while($row2 = $result2->fetch_assoc()) {
$idventa=$row2["id_venta"];
echo "<tr>
<td>Salida</td>
<td>".$row2["id_producto"]."</td>
<td>".$row2["cantidad"]."</td>";
$sql4="SELECT * FROM venta WHERE id_venta='$idventa'";
$result4=$conn->query($sql4);
if($result4->num_rows>0){
while($row4=$result4->fetch_assoc()){
echo "<td>".$row4["fecha_emision"]."</td></tr>";
}
}
}
}
}else{
echo "<tr><td colspan='100%'>No hay datos por mostrar</td></tr>";
}
?>
</tbody>
</table>
<a class='btn btn-info' role='button' href='producto.php'><i class="fa fa-arrow-left" aria-hidden="true"></i> Regresar</a>
</div>
</body>
</html>
Que me muestra el historial del producto(Entrada y Salida) indicado: Aqui por ejemplo es el producto de codigo: 1
Y aqui el de mi producto codigo: 2
Agradezco de antemano toda la ayuda que puedan brindarme.