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/

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

Ejercicio.- Adivinar un numero random en kotlin (Curso de Kotlin desde cero [34])

Ejercicio.- Adivinar un numero random en kotlin (Curso de Kotlin desde cero [34])

En este tutorial vamos a hacer un programa que: Generamos un n煤mero aleatorio entre 1…

5 meses hace

Probar nuestra app web desde nuestra maquina local con ngrok en ubuntu 16.04 鈽侊笍

Alguna vez has querido mostrar tu aplicaci贸n web en un dominio/subdominio o compartir un archivo,esto…

3 a帽os hace

Mi primer app de shopify ?

RequerimientosRubyRubyGemsBundlerDescarga la aplicaci贸n de ejemplo1.- Ya que debemos correr la aplicaci贸n en una url con…

3 a帽os hace

Instalar un entorno gr谩fico (xfce) en un servidor ubuntu 16.04 ?

En ocasiones tenemos la necesidad de tener un entorno grafico en un servidor por diferentes…

3 a帽os hace

Certbot error certificer “Client with the currently selected authenticator does not support any combination…”

Ultimamnte me di cuenta que al intentar certificar mis dominios certbot envia este error:Client with…

3 a帽os hace
hackear wifi con kali linux ?

hackear wifi con kali linux ?

Hoy en d铆a tenemos la fortuna de tener muchas redes a nuestro alrededor, no necesariamente…

3 a帽os hace