Skip to content

Instantly share code, notes, and snippets.

@pochitax

pochitax/animales.json

Last active June 15, 2022 22:45
Show Gist options
  • Save pochitax/b2cddc641eb02121646536bb05dd849a to your computer and use it in GitHub Desktop.
Save pochitax/b2cddc641eb02121646536bb05dd849a to your computer and use it in GitHub Desktop.
Download ZIP
Tablas con Bootstrap y contenido dinámico
Raw
animales.json
[
{
"id": 1,
"nombre": "Perro",
"email": "[email protected]",
"edad": "51",
"avatar": "https://ichef.bbci.co.uk/news/800/cpsprodpb/15665/production/_107435678_perro1.jpg.webp"
},
{
"id": 2,
"nombre": "Gato",
"email": "[email protected]",
"edad": "38",
"avatar": "https://www.purina-latam.com/sites/g/files/auxxlc391/files/styles/kraken_generic_max_width_960/public/01_%C2%BFQu%C3%A9-puedo-hacer-si-mi-gato-est%C3%A1-triste-.png"
},
{
"id": 3,
"nombre": "Kiwi",
"email": "[email protected]",
"edad": "27",
"avatar": "https://www.hogarmania.com/archivos/201905/kiwi-xl-668x400x80xX-1.jpg"
},
{
"id": 4,
"nombre": "Pingüino",
"email": "[email protected]",
"edad": "47",
"avatar": "https://cnnespanol.cnn.com/wp-content/uploads/2021/02/Pinguino-rey-amarillo-blancos-negros-CNN.jpg?quality=100&strip=info"
},
{
"id": 5,
"nombre": "Hamster",
"email": "[email protected]",
"edad": "41",
"avatar": "https://estaticos.muyinteresante.es/uploads/images/gallery/59a697445bafe8f6f6b3d6dc/hamster-sirio_0.jpg"
},
{
"id": 6,
"nombre": "Cuyi",
"email": "[email protected]",
"edad": "39",
"avatar": "https://media.chvnoticias.cl/2019/05/descarga-1-1.jpg"
},
{
"id": 7,
"nombre": "Vaca",
"email": "[email protected]",
"edad": "54",
"avatar": "https://images.ecestaticos.com/C0LO7pQz-ob4AdJO9gCT0GU5jiI=/0x0:1000x750/1200x900/filters:fill(white):format(jpg)/f.elconfidencial.com%2Foriginal%2Ff6d%2F1ba%2F967%2Ff6d1ba96704a71bf760887d64feafc85.jpg"
},
{
"id": 8,
"nombre": "Capibara",
"email": "[email protected]",
"edad": "32",
"avatar": "https://t2.ea.ltmcdn.com/es/posts/5/8/1/cuidados_de_una_capibara_20185_orig.jpg"
},
{
"id": 9,
"nombre": "Caracal",
"email": "[email protected]",
"edad": "41",
"avatar": "https://i.pinimg.com/564x/52/cf/19/52cf19d235b76bc5068d0a1cfd7ce7b4.jpg"
}
]
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<h1 class="mb-3">Administrador de Usuarios</h1>
</div>
<div class="col-md-12">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Nombre</th>
<th>Email</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="contenidoTabla">
<!-- ESTRUCTUTURA REPETIBLE -->
<!-- fila -->
<!--// ESTRUCTUTURA REPETIBLE -->
</tbody>
</table>
</div>
</div>
</div>
<!-- MODAL FORMULARIO -->
<div class="modal fade" id="modalForm" tabindex="-1" aria-labelledby="modalFormLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalFormLabel">Formulario de Edición</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="formName" class="form-label">Nombre Completo</label>
<input type="text" class="form-control" id="formName" placeholder="Ingresa tu nombre" value="Juan Pérez">
</div>
<div class="mb-3">
<label for="formEmail" class="form-label">Correo electrónico</label>
<input type="email" class="form-control" id="formEmail" placeholder="Ingresa el mail" value="[email protected]">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-3">Actualizar datos</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- MODAL PERFIL -->
<div class="modal fade" id="modalProfile" tabindex="-1" aria-labelledby="modalProfileLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalProfileLabel">Juan Pérez</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img id="imagenPersona" src="https://mejorconsalud.as.com/wp-content/uploads/2017/11/hombre-sonriendo-gafas.jpg" class="w-100 mb-3">
<h3>Hola soy <span id="nombreModal">Juan Pérez</span></h3>
<p class="mb-0">Mi correo electrónico es <a id="correoPersona" href="mailto:[email protected]">[email protected]</a> y tengo <span id="edadPersona">40</span> años.</p>
</div>
</div>
</div>
</div>
<!-- BOOSTRAP SCRIPTS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!-- SCRIPT GENERAL -->
<script src="js/script.js"></script>
</body>
</html>
Raw
repetible.html
<tr>
<!-- columnas -->
<td>1</td>
<td>Juan Pérez</td>
<td>[email protected]</td>
<td>
<!-- boton edicion -->
<a class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalForm" data-bs-titulo="Juanito Perez" data-bs-email="[email protected]">Editar</a>
<!-- botón eliminar -->
<a class="btn btn-danger">Eliminar</a>
<!-- botón perfil -->
<a class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalProfile" data-bs-titulo="Juanito Perez" data-bs-email="[email protected]" data-bs-edad="42" data-bs-imagen="https://i0.wp.com/codigoespagueti.com/wp-content/uploads/2021/07/goku-toei-animation.jpg">Perfil</a>
<!-- // -->
</td>
</tr>
Raw
script.js
// Modal Formulario
ModalFormulario = document.getElementById('modalForm')
ModalFormulario.addEventListener('show.bs.modal', function(){
console.log('Se abre el formulario');
boton = event.relatedTarget
titulo = boton.getAttribute('data-bs-titulo')
email = boton.getAttribute('data-bs-email')
document.getElementById('formName').value = titulo
document.getElementById('formEmail').value = email
})
// Modal perfil
ModalPerfil = document.getElementById('modalProfile')
ModalPerfil.addEventListener('show.bs.modal', function(){
boton = event.relatedTarget
titulo = boton.getAttribute('data-bs-titulo')
email = boton.getAttribute('data-bs-email')
imagen = boton.getAttribute('data-bs-imagen')
edad = boton.getAttribute('data-bs-edad')
//titulo nombre
document.getElementById('modalProfileLabel').innerText = titulo
document.getElementById('nombreModal').innerText = titulo
// cambio email
document.getElementById('correoPersona').innerText = email
document.getElementById('correoPersona').setAttribute('href','mailto:' + email)
// cambio edad
document.getElementById('edadPersona').innerText = edad
// cambio imagen
document.getElementById('imagenPersona').setAttribute('src', imagen)
})
// GENERAR FUNCIÓN EACH PARA TRAER DATOS DESDE UN JSON
$(document).ready( function(){
$.get({
url: 'js/animales.json', //'https://my-json-server.typicode.com/alaravena/ldp3101/usuarios',
success: function(response){
var alumnos
$.each(response, function(index,objeto) {
alumnos = '<tr>'
alumnos += '<td>' + (index + 1) + '</td>'
alumnos += '<td>' + objeto.nombre + '</td>'
alumnos += '<td>' + objeto.email + '</td>'
alumnos += '<td>'
alumnos += '<a class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalForm" data-bs-titulo="' + objeto.nombre + '" data-bs-email="' + objeto.email + '">Editar</a>'
alumnos += '<a class="btn btn-danger">Eliminar</a>'
alumnos += '<a class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalProfile" data-bs-titulo="' + objeto.nombre + '" data-bs-email="' + objeto.email + '" data-bs-edad="' + objeto.edad + '" data-bs-imagen="' + objeto.avatar + '">Perfil</a>'
alumnos += '</td>'
alumnos += '</tr>'
$('#contenidoTabla').append(alumnos)
})
},
error: function(response){},
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment