Tablas-Ventana_Modal(Bootstrap)

JCCC6000 · #1 (**permalink**) 13/04/2016, 15:30

Hola a todos, tan solo quisiera que me ayuden a elaborar una tabla dentro de una ventana modal de Bootstrap, con conexión a base de datos. Lo he intentado y la verdad que hasta ahora no logro realizarlo, espero la ayuda correspondiente, les agradecería bastante.

avilavalenz · #2 (**permalink**) 14/04/2016, 12:09

Buen día colega, como no especificas los lenguajes de programación del back-end te dejo solo la vista:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo Bootstrap Modal con Tabla</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta author="@avilavalenz">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Ejemplo Modal con tabla dentro</h2>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Abrir Modal</button>

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Encabezado del Modal</h4>
</div>
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr><th>Título 1</th><th>Título 2</th></tr>
</thead>
<tbody>
<tr><td>Campo 1 T1</td><td>Campo 1 T2</td></tr>
<tr><td>Campo 2 T1</td><td>Campo 2 T2</td></tr>
<tr><td>Campo 3 T1</td><td>Campo 3 T2</td></tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

JCCC6000 · #3 (**permalink**) 14/04/2016, 15:15

Ante todo gracias por responder "avilavalenz", definitivamente eso es lo que hice, pero la cabecera de la tabla no me aparece en la ventana modal, me aparece en la ventana prinicipal, justo debajo de otra tabla que ya tengo, lo unico que me aparece en la ventana modal es el titulo de modal-header y el titulo de la misma tabla.

<div class="modal fade" id="lista-contrato" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >

<input type="hidden" name="dni_contrato" class="form-control" id="dni_ctr" >

<div class="modal-dialog" style="width:85%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>CONTRATOS</h4>
</div>

<div class="modal-body">

<table class="table table-hover">
<thead>

<tr>
<th>N°</th>
<th>NOMBRES Y APELLIDOS</th>
<th>DNI</th>
<th>ASIGNACIÓN</th>
<th>FECHA_INICIAL</th>
<th>FECHA_TÉRMINO</th>
<th>OPC.1</th>
<th>OPC.2</th>
</tr>
</thead>
<tbody>
<?php
include("cone.php");
$dni=$_POST['dni_contrato'];
$sqlo=mysql_query("SELECT * FROM asignacion_personal where dni='$dni'") or die(mysql_error());
while($ff=mysql_fetch_array($sqlo))
{

$n_orden=$n_orden+1;
$id=$ff['id_personal'];
$nombre=$ff['nombres'];
$dni=$ff['dni'];
$apaterno=$ff['ap_paterno'];
$amaterno=$ff['ap_materno'];
$fi=$ff['fecha_inicio'];
$ffi=$ff['fecha_final'];
$asignacion=$ff['asignación'];

echo "<tr>
<td>$n_orden</td>
<td>$nombre $apaterno $amaterno</td>
<td>$dni</td>
<td>$asignacion</td>
<td>$fi</td>
<td>$ffi</td>
<td><button class=\"open-Modal btn btn-info btn-sm\"name=\"s\"value=\"\"data-toggle=\"modal\"data-target=\"#\"data-id=\"$id\"data-nombre=\"$nombre\"data-apaterno=\"$apaterno\"data-amaterno=\"$amaterno\"data-dni=\"$dni\"data-profesion=\"$profesion\"data-universidad=\"$universidad\"data-id_admin=\"$ID\">Modificar Contrato</button></td>
<td><button class=\"open-Modal btn btn-info btn-sm\"name=\"s\"value=\"\"data-toggle=\"modal\"data-target=\"#\"data-dni=\"$dni\">Imprimir</button></td>

</tr>";

}

?>
</tbody>
</table>

</div></div></div></div>