[![introducir la descripción de la imagen aquí][1]][1]
```
<div class="content-wrapper">
<section class="content-header">
<h1>
Administrar Productos
</h1>
<ol class="breadcrumb">
<li><a href="inicio"><i class="fa fa-dashboard"></i>
Inicio</a></li>
<li class="active">Administrar Productos</li>
</ol>
</section>
<section class="content">
<div class="box">
<div class="box-header with-border">
<button class="btn btn-primary" data-toggle="modal" data-
target="#modalAgregarProducto">
Agregar Producto
</button>
</div>
<div class="box-body">
<table class=" table table-bordered table-striped dt-responsive
tablaProductos" width="100%">
<thead>
<tr>
<th style="width:10px">#</th>
<th>Imagen</th>
<th>Código</th>
<th>Descripcíon</th>
<th>Categorias</th>
<th>Stock</th>
<th>Precio De compra</th>
<th>Precio De venta</th>
<th>Agregado</th>
<th>Acciones</th>
</tr>
</thead>
<!-- <tbody>
<?php
$item = null;
$valor = null;
$productos = ControladorProductos::ctrMostrarProductos($item,
$valor);
foreach ($productos as $key => $value) {
echo '<tr>
<td>'.($key+1).'</td>
<td><img src="vistas/img/productos/default/anonymous.png"class="img-thumbnail" width="40px"></td>
<td>'.$value["codigo"].'</td>
<td>'.$value["descripcion"].'</td>';
$item = "id";
$valor = $value["id_categoria"];
$categoria = ControladorCategorias::ctrMostrarCategorias($item, $valor);
echo '<td>'.$categoria["categoria"].'</td>
<td>'.$value["stock"].'</td>
<td>$'.$value["precio_compra"].'</td>
<td>$'.$value["precio_venta"].'</td>
<td>'.$value["fecha"].'</td>
<td>
<div class="btn-group">
<button class=" btn btn-warning"><i class="fa fa-pencil"></i></button>
<button class=" btn btn-danger"><i class="fa fa-times"></i></button>
</div>
</td>
</tr>';
}
?>
</tbody> -->
</table>
</div>
</div>
</section>
</div>
{ =====================================
MODAL AGREGAR PRODUCTO
========================================= }
<div id="modalAgregarProducto" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" enctype="multipart/form-data">
{ =====================================
{CABEZA DEL MODAL}
========================================= }
<div class="modal-header" style="background:#3c8dbc; color:white">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Agregar Producto</h4>
</div>
=====================================
CUERPO DEL MODAL
=========================================
<div class="modal-body">
<div class="box-body">
<!-- ENTRADA PARA EL CODIGO-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-code"></i></span>
<input type="text" class="form-control input-lg" name="nuevoCodigo" placeholder="Ingrese Código" required>
</div>
</div>
<!-- ENTRADA PARA LA DESCRIPCION-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-product-hunt"></i></span>
<input type="text" class="form-control input-lg" name="nuevaDescripcion" placeholder="Ingrese Descripción" required>
</div>
</div>
<!-- ENTRADA PARA SELECCIONAR CATEGORIA-->
<div class="form-group">
> <div class="input-group">
> <span class="input-group-addon"><i class="fa fa-th"></i></span>
> <select class="form-control input-lg" name="nuevaCategoria" >
> <option value="">Selecionar Perfil</option>
> <option value="Taladros">Taladros</option>
> <option value="Andamios">Andamios</option>
> <option value="Equipos para la contrucíon">Equipos para la contrucíon</option>
> </select>
> </div>
> </div>
> <!-- ENTRADA PARA STOCK-->
> <div class="form-group">
> <div class="input-group">
> <span class="input-group-addon"><i class="fa fa-check"></i></span>
> <input type="number" class="form-control input-lg" name="nuevoStock" min="0" >placeholder="STOCK" required>
> </div>
> </div>
> <!-- ENTRADA PARA PRECIO COMPRA-->
> <div class="form-group row">
> <div class="col-xs-6">
> <div class="input-group">
> <span class="input-group-addon"><i class="fa fa-arrow-up"></i></span>
> <input type="number" class="form-control input-lg" name="nuevoPrecioCompra" min="0" >placeholder="Precio De Compra" required>
> </div>
> </div>
> <!-- ENTRADA PARA PRECIO VENTA-->
> <div class="col-xs-6">
> <div class="input-group">
> <span class="input-group-addon"><i class="fa fa-arrow-down"></i></span>
> <input type="number" class="form-control input-lg" name="nuevoPrecioVenta" min="0" >placeholder="Precio De Venta" required>
</div>
<br>
> <!-- CHECKBOX PARA PORCENTAJE-->
> <div class="col-xs-6">
> <div class=" form-group">
> <label>
> <input type="checkbox" class="minimal porcentaje" checked>
> Utilizar porcentaje
> </label>
> </div>
</div>
<!-- ENTRADA PARA PORCENTAJE-->
<div class="col-xs-6" style="padding:0">
<div class="input-group">
<input type="number" class="form-control input-lg nuevoPorcentaje" min="0" value="40" required>
<span class="input-group-addon"><i class="fa fa-percent"></i></span>
</div>
</div>
</div>
</div>
<!-- ENTRADA PARA SUBIR FOTO-->
<div class="form-group">
<div class="panel">SUBIR IMAGEN</div>
<input type="file" id="nuevaImagen" name="nuevaImagen">
<p class="help-block">Peso maximo de la imagen 2 MB</p>
<img src="vistas/img/productos/default/anonymous.png" class="img-thumbnail" width="100px">
</div>
</div>
</div>
=====================================
PIE DEL PAGINA DEL MODAL
=========================================
<div class="modal-footer">
<button type="button" class="btn btn-defaul pull-left" data-dismiss="modal">Salir</button>
<button type="submit" class="btn btn-primary">Guardar Producto</button>
</div>
<?php
$crearUsuario = new ControladorUsuarios();
$crearUsuario -> ctrCrearUsuario();
?>
</form>
</div>
</div>
</div>
```
clase producto.js
Aqui llamo al dataTable
```
/=============================================
= CARGAR LA TABLA DINAMICA DE PRODUCTOS =
=============================================/
$.ajax({
url:"ajax/datatable-productos.ajax.php",
success:function(respuesta){
console.log("respuesta", respuesta);
}
})
$('.tablaProductos').DataTable({
"ajax": "ajax/datatable-productos.ajax.php"
});
clase datatable-productos.ajax.php
esta es la clase que me tendria qwue traer los datos de la base
```<?php
require_once "../controladores/productos.controlador.php";
require_once "../modelos/productos.modelo.php";
require_once "../controladores/categorias.controlador.php";
require_once "../modelos/categorias.modelo.php";
class TablaProductos{
/=============================================
= MOSTRAR LA TABLA DE PRODUCTOS =
=============================================/
public function mostrarTablaProductos(){
$item = null;
$valor =null;
$productos = ControladorProductos::ctrMostrarProductos($item,$valor);
$botones= "<div class='btn-group'>
<button class=' btn btn-warning'><i class='fa fa-pencil'></i></button>
<button class=' btn btn-danger'><i class='fa fa-times'></i></button></div>";
$datosJson = ' {
"data": [';
for ($i=0; $i < count($productos) ; $i++) {
$imagen = "<img src ='".$productos[$i]["imagen"]."' width='40px'>";
$datosJson .='[
"'.($i+1).'",
"'.$imagen.'",
"'.$productos[$i]["codigo"].'",
"'.$productos[$i]["descripcion"].'",
"'.$productos[$i]["stock"].'",
"'.$productos[$i]["precio_compra"].'",
"'.$productos[$i]["precio_venta"].'",
"'.$productos[$i]["fecha"].'",
"'.$botones.'"
],';
}
$datosJson = substr($datosJson,0,-1);
$datosJson .= ']}';
echo $datosJson;
}
}
/=============================================
= ACTIVAR TABLA DE PRODUCTOS =
=============================================/
$activarProductos = new TablaProductos();
$activarProductos -> mostrarTablaProductos();
```
[1]: https://i.sstatic.net/9gCBl.png