Curso de PHP🐘 y MySql🐬 [88.- Agregar un calendario📆 y un select a nuestro datatable]
En este tutorial vamos colocar un calendario a nuestros campos de tipo fecha y ademas agregaremos un select a las categorías, pero ese select sera cargado desde un json el cual sera generado por un archivo php llamado categoria.php
Codigo: https://github.com/programadornovato/php/commit/33d8a3d9b2efda4235ad9b643f2a907e96770836
<?php
include_once "db_empresa.php";
$con=mysqli_connect($db_host,$db_user,$db_pass,$db_database);
$query="SELECT categoria as label,categoria as value FROM productos GROUP BY categoria";
$res=mysqli_query($con,$query);
$arrayJson=array();
while ( $row=mysqli_fetch_assoc($res) ){
$arrayJson[]=$row;
}
echo json_encode($arrayJson);
?>
<!doctype html>
<html lang="en">
<head>
<title>datatables</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="css/editor.dataTables.min.css">
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col-12">
<table class="table table-striped" id="productos">
<thead>
<tr>
<th>Nombre</th>
<th>Precio de compra</th>
<th>Fecha de compra</th>
<th>Categoria</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nombre</th>
<th>Precio de compra</th>
<th>Fecha de compra</th>
<th>Categoria</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="js/dataTables.editor.min.js"></script>
<script>
var editor;
$(document).ready(function () {
$.ajax({
type: "get",
url: "categoria.php",
dataType: "json",
success: function (response) {
cargaDataTable(response)
}
});
function cargaDataTable(categorias) {
editor = new $.fn.dataTable.Editor({
ajax: "controllers/productos.php",
table: "#productos",
fields: [
{
label: "Nombre",
name: "nombre"
},
{
label: "Precio de compra",
name: "precioCompra"
},
{
label: "Fecha de compra",
name: "fechaCompra",
type: "datetime"
},
{
label: "Categoria",
name: "categoria",
type: "select",
options: categorias
}
]
});
$("#productos").DataTable({
dom: "Bfrtip",
ajax: "controllers/productos.php",
columns: [
{ data: "nombre" },
{ data: "precioCompra" },
{ data: "fechaCompra" },
{ data: "categoria" }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor },
]
});
}
});
</script>
</body>
</html>
🔗 Tipos de campos en datatable: https://editor.datatables.net/examples/simple/fieldTypes.html
🔗 Como instalar datatable: https://editor.datatables.net/manual/php/installing
🔗 Dom de datatable: https://datatables.net/reference/option/dom
🔗JS y CSS de nuestra datatable: https://editor.datatables.net/examples/simple/simple.html
🔗 Visualizar son: http://jsonviewer.stack.hu/
🎦 Esta lista de reproducción: https://www.youtube.com/playlist?list=PLCTD_CpMeEKS2Dvb-WNrAuDAXObB8GzJ0
Codigos en gdrive: https://drive.google.com/file/d/1tQwYvfL2jiUFc6beTWkOkGmXkq5zzFw2/view?usp=sharing
Gracias por apoyar este canal: https://www.patreon.com/programadornovato?fan_landing=true
🔗 Facebook: https://facebook.com/ProgramadorNovatoOficial
🔗 Twitter: https://twitter.com/programadornova
🔗 Linkedin: https://www.linkedin.com/in/programadornovato/
🔗 Instagram: https://www.instagram.com/programadornovato/
