Skip to main content
3 de 3
se añadieron 172 caracteres en el cuerpo
Cesarin
  • 728
  • 4
  • 21

Mostrar datos de un dataTable en un modal

como se puede modificar este código para evitar el uso de "indices" para la carga de datos desde un dataTable a un modal y así evitar también el uso de "indices" en todos los eventos y datos del formulario, vistas etc etc.
Primero la vista del dataTable, se eliminaron los datos sensibles.

<div class="panel-body">
                    <table id="misBienesUnidadUsuarioImpresionResguardo"  class="table table-striped table-bordered display" style="width:100%">
                        <thead>
                        <tr>
                            <th label style="font-size:12px; background-color: #C8C8AA;">ORDEN</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">NUMERO EMPLEADO</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">NOMBRE COMPLETO</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">CLAVE UNIDAD</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">UNIDAD</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">CANTIDAD DE BIENES</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">PROCESO:</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">ACCIONES:</th>

                        </tr>
                        </thead>
                        <tbody>
                        <?PHP
                        for($i=0; $i< $totalResultadoBienes_UnidadUsuario; $i++){
                            $empleado_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getNumero_Empleado();
                            $nombre_UnidadUsuario= $resultadoBienes_UnidadUsuario[$i]->getNombre();
                            $cct_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getCct();
                            $unidad_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getLoc_Pla();
                            $activo_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getActivo();
                            $movimiento_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getEstatus_Movimiento();
                            $nombreMovimiento_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getNombreMovimiento();
                            $estatus_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getEstatus_Proceso();
                            ?>
                            <tr>
                                <td style="font-size:10px;"><?= $i+1?></td>
                                <td style="font-size:10px;"><?=$empleado_UnidadUsuario?></td>
                                <td style="font-size:10px;"><?=$nombre_UnidadUsuario?></td>
                                <td style="font-size:10px;"><?=$cct_UnidadUsuario?></td>
                                <td style="font-size:10px;"><?=$unidad_UnidadUsuario?></td>
                                <td style="font-size:10px;"><?=$activo_UnidadUsuario?></td>
                                <td>
                                    <?PHP
                                    if($movimiento_UnidadUsuario == 0){

                                        ?>
                                        <div class="contenedor"><img src="imagenes/iconos/proceso/folder_blue_48.png" width="35" height="35">
                                            <div class="centrados"><strong><p><font face="Arial" style="font-size:10px;"><?=$nombreMovimiento_UnidadUsuario ?></p></strong></div>
                                        </div>

                                        <?PHP
                                    }
                                    elseif($movimiento_UnidadUsuario == 1){

                                        ?>
                                        <div class="contenedor"><img src="imagenes/iconos/proceso/folder_orange_48.png"  width="35" height="35">
                                            <div class="centrados"><strong><p><font face="Arial" style="font-size:10px;"><?=$nombreMovimiento_UnidadUsuario?></p></strong></div>
                                        </div>
                                        <?PHP
                                    }
                                    elseif($movimiento_UnidadUsuario == 2){
                                        ?>
                                        <div class="contenedor"><img src="imagenes/iconos/proceso/folder_yellow_48.png"  width="35" height="35">
                                            <div class="centrados"><strong><p><font face="Arial" style="font-size:10px;" ><?=$nombreMovimiento_UnidadUsuario?></p></strong></div>
                                        </div>
                                        <?PHP
                                    }elseif($movimiento_UnidadUsuario == 3){
                                        ?>
                                        <div class="contenedor"><img src="imagenes/iconos/proceso/folder_green_48.png"  width="35" height="35">
                                            <div class="centrados"><strong><p><font face="Arial" style="font-size:10px;" ><?=$nombreMovimiento_UnidadUsuario?></p></strong></div>
                                        </div>
                                        <?PHP
                                    }elseif($movimiento_UnidadUsuario == 4){
                                        ?>
                                        <div class="contenedor"><img src="imagenes/iconos/proceso/folder_green_48.png"  width="35" height="35">
                                            <div class="centrados"><strong><p><font face="Arial" style="font-size:10px;" ><?=$nombreMovimiento_UnidadUsuario?></p></strong></div>
                                        </div>
                                        <?PHP
                                    }
                                    ?>

                                </td>
                                <?PHP
                                ?>

                                <td  style="font-size:10x;">
                                    <?PHP
                                    if ($_SESSION['ID_ROL'] == 3) {
                                        if($movimiento_UnidadUsuario == 4){
                                            ?>
                                            <button type="button" id="CargarResguardoIndividual" class="btn btn-success -upload"   data-toggle="modal" data-target="#modalCargaResguardoIndividual<?= $i+1?>"
                                                    data-keyboard="false" data_backdrop="static" title="CARGA INDIVIDUAL DEL RESGUARDO"><span class="glyphicon glyphicon-open-file"></span>
                                            </button>
                                            <?PHP
                                        } else {

                                            ?>
                                            <button type="button"  id="CargarResguardoIndividual" class="btn btn-success -upload" data-toggle="modal" data-target="#modalCargaResguardoIndividual<?= $i+1?>"
                                                    data-keyboard="false" data_backdrop="static" title="CARGA INDIVIDUAL DEL RESGUARDO"><span class="glyphicon glyphicon-open-file"></span>
                                            </button>
                                            <?PHP
                                        }
                                    }
                                    ?>
                                    <button id="AyudaCargarResguardoIndividual" name="boton"  type="button"  class="btn btn-success -sign-in"  title="AYUDA" data-toggle="modal" data-target="#modalAyudaCargaResguardoIndividual"><span class="glyphicon glyphicon-question-sign"></span>
                                    </button>
                                </td>
                            </tr>

                            <?php
                        }// cierre del ciclo
                        ?>
                        <tfoot>
                        <tr>
                            <th label style="font-size:12px; background-color: #C8C8AA;">ORDEN</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">NUMERO EMPLEADO</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">NOMBRE COMPLETO</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">CLAVE UNIDAD</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">UNIDAD</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">CANTIDAD DE BIENES</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">PROCESO:</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">ACCIONES:</th>
                        </tr>
                        </tfoot>
                        </tbody>
                    </table>
                <!--  Inicio del Modal CargarProyectoResguardoIndividual-->
                        <?PHP require_once 'modales/modalCargarProyectoResguardoIndividual.php';?>
                <!--  Fin del Modal CargarProyectoResguardoIndividual-->
                <!--  Inicio del Modal AyudaCargarProyectoResguardoIndividual-->
                        <?PHP require_once 'modales/modalAyudaCargarProyectoResguardoIndividual.php';?>
                <!--  Fin del Modal AyudaCargarProyectoResguardoIndividual-->
                <div class="pie_tabla">
                    <button class="btn btn-success" type="button" id="btnCargarProyecto" data-toggle="modal" data-target="#modalCargarProyectoResguardoMultiple" data-keyboard="false" data-backdrop="static" data-numero_empleado=""
                            title="CARGAR PROYECTO" ><img  type="button" src="imagenes/iconos/acciones/archivoPDF.png" width="35" height="35" >&nbsp; CARGAR PROYECTO </button>
                </div>
                <!--  Inicio del Modal CargarProyectoResguardoMultiple-->
                <?PHP require_once 'modales/modalCargarProyectoResguardoMultiple.php'; ?>
                <!--  Inicio del Modal CargarProyectoResguardoMultiple-->
            </div>
Este codigo genera esta vista Vista de dataTable

El boton : <button type="button" id="CargarResguardoIndividual" class="btn btn-success -upload" data-toggle="modal" data-target="#modalCargaResguardoIndividual<?= $i+1?>" data-keyboard="false" data_backdrop="static" title="CARGA INDIVIDUAL DEL RESGUARDO"><span class="glyphicon glyphicon-open-file"></span> </button>

Para la peticion del modal.

Este es el codigo del Modal:

<!-- Modal -->
<?PHP
for($i=0; $i< $totalResultadoBienes_UnidadUsuario; $i++)
{
    $nombreUnidad=$resultadoBienes_UnidadUsuario[$i]->getLoc_Pla();
    $nombreTipoUnidad=$resultadoBienes_UnidadUsuario[$i]->getTipoUnidad();
    $nombreProyectoUnidad=$resultadoBienes_UnidadUsuario[$i]->getProyecto();
    $numeroEmpleado=$resultadoBienes_UnidadUsuario[$i]->getNumero_Empleado();
    $nombreEmpleado=$resultadoBienes_UnidadUsuario[$i]->getNombre();
    ?>
<script>
    $(document).ready(function(){

        $("button#cargarArchivo<?=$i+1?>").click(function(e){
            e.preventDefault();
            var paqueteDeDatos = new FormData();
            paqueteDeDatos.append('archivo',$('#archivo<?=$i+1?>')[0].files[0]);
            paqueteDeDatos.append('nombreTipoUnidad',$("#nombreTipoUnidad<?=$i+1?>").val());
            paqueteDeDatos.append('nombreProyectoUnidad',$("#nombreProyectoUnidad<?=$i+1?>").val());
            $.ajax({
                url: "procesarArchivo.php",
                type: "post",
                data: paqueteDeDatos,
                dataType: "json",
                contentType: false,
                processData: false,
                success: function(){
                    $("#modalCargaResguardoIndividual<?=$i+1?>").modal('hide');
                    swal("Se Cargo el Archivo Exitosamente!","Aceptar","success");
                    console.log("Alert Callback");
                    location.reload();
                },
                error: function(){
                    $("#modalCargaResguardoIndividual<?=$i+1?>").modal('hide');
                    swal("No se pudo Cargar el Archivo","Aceptar","error");
                    console.log("Alert Callback");
                    location.reload();
                },
            });
        });
    });

</script>
<div class="modal fade" id="modalCargaResguardoIndividual<?=$i+1?>" name="modalCargaResguardoIndividual" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title" id="exampleModalLabel"><strong>CARGA DE RESGUARDO INDIVIDUAL POR COLABORADOR</strong></h5>
            </div>
            <div class="modal-body">

                    <table id="CargarProyectoResguardo_DatosUnidad-1" class="table table-striped center table-bordered responsive display" style="width:100%">
                        <thead>
                        <tr>
                            <th style="font-size:10px; background-color: #5bc0de;" class="text-center" colspan="3"> INFORMACI&Oacute;N GENERAL</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="font-size:10px;" class="text-center">
                            <td>&nbsp;UNIDAD:&nbsp;</td>
                            <td> TIPO DE UNIDAD:&nbsp;</td>
                            <td>&nbsp;PROYECTO AL QUE PERTENECE:&nbsp;</td>
                        </tr>
                        <tr style="font-size:10px;" class="text-center">
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreUnidad?></strong>&nbsp;</span></td>
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreTipoUnidad?></strong>&nbsp;</span></td>
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreProyectoUnidad?></strong>&nbsp;</span></td>
                        </tr>
                        </tbody>
                    </table>
                    <table id="CargarProyectoResguardo_DatosUnidad-2" class="table table-striped center table-bordered responsive display" style="width:100%">
                        <thead>
                        <tr>
                            <th style="font-size:10px; background-color: #5BC0DE;" class="text-center" colspan="2"> INFORMACI&Oacute;N DEL COLABORADOR</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="font-size:10px;" class="text-center">
                            <td>&nbsp;NOMBRE :&nbsp;</td>
                            <td>&nbsp;NUMERO EMPLEADO:&nbsp;</td>
                        </tr>
                        <tr style="font-size:10px;" class="text-center">
                            <td>&nbsp;<strong><?=$nombreEmpleado?></strong>&nbsp;</td>
                            <td>&nbsp;<strong><?=$numeroEmpleado?></strong>&nbsp;</td>
                        </tr>
                        <tr>
                        </tbody>
                    </table >
                <table id="CargarProyectoResguardo_DatosUnidad-3" class="table table-striped center table-bordered responsive display" style="width:100%">
                    <thead>
                    <tr>
                        <th style="font-size:10px; background-color: #5BC0DE;" class="text-center" colspan="3"> CARGA DE ARCHIVOS INDIVIDUALES POR COLABORADOR</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <div class="row">
                                <div id="content" class="col-lg-12">
                                    <div id="respuesta" class="alert"></div>
                                    <form action="" method="post" id="formCargarArchivo<?=$i+1?>" name="formCargarArchivo" enctype="multipart/form-data" >
                                        <div id="content" class="col-lg-12">
                                            <div class="form-group col-lg-12">
                                                <input type="file" class="form-control-file" name="archivo" id="archivo<?=$i+1?>" accept="application/pdf">
                                            </div>
                                            <div class="form-group col-lg-12">
                                                <button type="submit" id="cargarArchivo<?=$i+1?>"  class="btn btn-primary">Subir Archivo</button>
                                            </div>
                                            <div class="form-group col-lg-12">
                                                <progress id="barra_de_progreso" value="0" max="100"></progress>
                                            </div>

                                            <input type="hidden" class="form-control"  name="nombreTipoUnidad" id="nombreTipoUnidad<?=$i+1?>" value="<?=$nombreTipoUnidad?>">
                                            <input type="hidden" class="form-control"  name="nombreProyectoUnidad"  id="nombreProyectoUnidad<?=$i+1?>" value="<?=$nombreProyectoUnidad?>">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div> <!-- fin Modal Body --->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

    <?php
}
?>

Y este codigo es el del modal que se muestra a continuacion ESte es el modal

Como se puede observar me veo en la necesidad de colocar este pequeño fragmento de codigo <?=$i+1?> al cual yo le denomino "indice", para que al momento que se despliegue el modal, muestre los datos correctos de la consulta y que corresponda de acuerdo al renglon y persona que ahi se muestra, asi como tambien su respectiva correspondencia del modal con cada renglon, y su funcion javascript para que haga la peticion del boton, etc. etc..

Si no utilizo este elemento <?=$i+1?> pues solo me muestra el dato del primer registro que trae la consulta o el ultimo.

Los datos que trae la tabla (dataTable): Orden , Numero Empleado , Nombre Completo, Clave Unidad , Unidad , Cantidad de bienes, Proceso, Acciones,

De estos datos en el modal se muestran:

Unidad, Nombre y numero de empleado, adicionalmente se trae en la consulta lo que corresponde al proyecto y tipo de unidad, estos datos se ocupan como parametros para formar una ruta de almacenamiento y complementar el nombre del archivo que se esta cargando al sistema o servidor, se muestran en el modal de la siguiente manera:

<tr style="font-size:10px;" class="text-center">
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreUnidad?></strong>&nbsp;</span></td>
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreTipoUnidad?></strong>&nbsp;</span></td>
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreProyectoUnidad?></strong>&nbsp;</span></td>
                        </tr>

Gracias

Cesarin
  • 728
  • 4
  • 21