Crear Tabla con JQuery.

En el presente post te presento la forma de crear una tabla responsiva utilizando Bootstrap y JQuery.

Helper.js

//Función para generar y retornar un conjunto de datos de prueba.
function ObtenDatos()
{
	var _personas= 
	[
		{
			personaId: 1,
			nombre: 'Adrian',
			apellidoPaterno: 'Gonzalez',
			apellidoMaterno: 'Fernandez',
			fechaNacimiento: '1990-10-12',
			genero: 'M'			
		},
		{
			personaId: 2,
			nombre: 'Maria',
			apellidoPaterno: 'Sanchez',
			apellidoMaterno: 'Torres',
			fechaNacimiento: '1960-02-04',
			genero: 'F'
		},
		{
			personaId: 3,
			nombre: 'Luis Fernando',
			apellidoPaterno: 'Morales',
			apellidoMaterno: 'Salgado',
			fechaNacimiento: '1988-09-20',
			genero: 'M'			
		},
		{
			personaId: 4,
			nombre: 'Victor',
			apellidoPaterno: 'Ferrer',
			apellidoMaterno: 'Lopez',
			fechaNacimiento: '1970-05-21',
			genero: 'M'
		},
		{
			personaId: 5,
			nombre: 'Amanda',
			apellidoPaterno: 'Sandria',
			apellidoMaterno: 'Martinez',
			fechaNacimiento: '1991-09-15',
			genero: 'F'
		},
		{
			personaId: 6,
			nombre: 'Rodrigo',
			apellidoPaterno: 'Montes',
			apellidoMaterno: 'Hernandez',
			fechaNacimiento: '1985-07-27',
			genero: 'M'
		},
		{
			personaId: 7,
			nombre: 'Emilio',
			apellidoPaterno: 'Duran',
			apellidoMaterno: 'Ruiz',
			fechaNacimiento: '2000-01-06',
			genero: 'M'
		},
		{
			personaId: 8,
			nombre: 'Santiago',
			apellidoPaterno: 'Montiel',
			apellidoMaterno: 'Garcia',
			fechaNacimiento: '1970-06-20',
			genero: 'M'
		},                  
		{
			personaId: 9,
			nombre: 'Monica',
			apellidoPaterno: 'Ortigoza',
			apellidoMaterno: 'Posadas',
			fechaNacimiento: '1975-11-04',
			genero: 'F'
		},
		{
			personaId: 10,
			nombre: 'Ricardo',
			apellidoPaterno: 'Parra',
			apellidoMaterno: 'Zuñiga',
			fechaNacimiento: '1997-08-16',
			genero: 'M'
		}		
	]

	return _personas;
}

//Función para crear la tabla.
function MuestraPersonas(tabla, datos)
{
	//Se limpiar el contenido de la tabla, excepto los titulos de las columnas.
	$('#' + tabla).find('tr:not(:first)').remove();		

	//Se valida si el origen de datos no contiene información.
	if(datos==null || datos.length==0)
	{		
		//Se crea una nueva fila.
		var _filaVacia = $((document).createElement('tr'));
        _filaVacia.css('text-align', 'center');

		//Se anexa la fila a la tabla.
        $('#' + tabla).append(_filaVacia);
		
		//Se crea una columna y se le asigna un tamaño de 4 columnas.
        var _columnaVacia = $((document).createElement('td'));            
        _columnaVacia.attr('colspan', 4);

		//Se crea un nodo de texto para definir un mensaje que se mostrará cuando no haya elementos.
        var _contenidoVacio = $((document).createTextNode('No se encontraron resultados :('));
		
		//Se anexa el nodo de texto a la columna.
        _columnaVacia.append(_contenidoVacio);
            
		//Se anexa la columna a la fila.
        _filaVacia.append(_columnaVacia);
		
		//Se finaliza la función.
		return;
	}
	
	//Se recorre cada uno de los elementos del origen de datos.
	$.each(datos, function (key, item)
	{
		//Se crea una nueva fila y se le asigna un identificador.
		var _fila= $((document).createElement('tr'));
		_fila.attr('id', 'fila'+item.personaId);

		//Se anexa la fila a la tabla.
		$('#' + tabla).append(_fila)
		
		//Identificador de la persona.

		//Se crea una nueva columna para encapsular los identificadores de las personas.		
		var _columnaPersonaId= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el identificador de la persona.
		var _personaId= $((document).createTextNode(item.personaId));
		
		//Se anexa a la columna [_columnaPersonaId] el nodo de texto.
		_columnaPersonaId.append(_personaId);
		
		//Se anexa la columna [_columnaPersonaId] a la fila.
		$('#fila' + item.personaId).append(_columnaPersonaId);
		
		//Nombre completo.
		
		//Se crea una nueva columna para encapsular el nombre completo de las personas.		
		var _columnaNombre= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el nombre completo de la persona.
		var _nombre= $((document).createTextNode(item.nombre + ' ' + item.apellidoPaterno + ' ' + item.apellidoMaterno));
		
		//Se anexa a la columna [_columnaNombre] el nodo de texto.
		_columnaNombre.append(_nombre);
		
		//Se anexa la columna [_columnaNombre] a la fila.
		$('#fila' + item.personaId).append(_columnaNombre);

		//Fecha de Nacimiento.
		
		//Se crea una nueva columna para encapsular la fecha de nacimiento de las personas.		
		var _columnaFechaNacimiento= $((document).createElement('td'));
		
		//En caso de que la fecha venga en formato largo, se debera de obtener el formato corto para cuestiones de presentación.
		var _fechaCorta= item.fechaNacimiento.split(' ')[0];
		
		//Se da formato a la fecha para presentarla como DD/MM/YYYY.
		var _elementosFecha= _fechaCorta.split('-');
		var _fecha= _elementosFecha[2] + '/' + _elementosFecha[1] + '/' + _elementosFecha[0];
				
		//Se crea un nodo de texto y se le asigna la fecha de nacimiento de la persona.
		var _fechaNacimiento= $((document).createTextNode(_fecha));
		
		//Se anexa a la columna [_columnaFechaNacimiento] el nodo de texto.
		_columnaFechaNacimiento.append(_fechaNacimiento);
		
		//Se anexa la columna [_columnaFechaNacimiento] a la fila.
		$('#fila' + item.personaId).append(_columnaFechaNacimiento);
		
		//Genero
		
		//Se crea una nueva columna para encapsular el genero de de las personas.		
		var _columnaGenero= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el genero de la persona.
		var _genero= $((document).createTextNode((item.genero == 'F')? 'Femenino': 'Masculino'));
		
		//Se anexa a la columna [_columnaGenero] el nodo de texto.
		_columnaGenero.append(_genero);
		
		//Se anexa la columna [_columnaGenero] a la fila.
		$('#fila' + item.personaId).append(_columnaGenero);
	});		
}

Tabla.html

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta charset="utf-8">
	<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">    
	<link href="../css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="container">
		<div class="row">
			<br/>
			<div class="col-md-12">
				<div class="panel panel-primary">
					<div class="panel-heading">				
						<div style="text-align:center;">
							Creación de una tabla con JQuery
						</div>
					</div>
					<div class="panel-body">
						<div class="row">
							<div class="col-md-12">
								<button type="button" id="btnCreaTabla" name="btnCreaTabla" class="btn btn-success">Crear tabla
								</button>                            
							</div>
						</div>
						<br/>
						<div class="row">
							<div class="col-md-12">
								<div class="table-responsive">
									<table id="tblConsulta" class="table table-bordered table-hover textColor" style="width:100%;">
										<tr style="font-weight: bold; background-color: #373a3c; color: white;">                                        
											<td class="bold">#</td>
											<td class="bold">Nombre</td>																			
											<td class="bold">Fecha de Nacimiento</td>
											<td class="bold">Genero</td>											
										</tr>
									</table>
								</div>
							</div>
						</div>						
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="../scripts/jquery-2.2.1.js"></script>
	<script src="../scripts/bootstrap.js"></script>
	<script src="../scripts/helper.js"></script>
	
	<script type='text/javascript'>	
		$(document).ready(function()
		{
			//Se invoca la función para crear y mostrar la tabla cuando no hay origen de datos.
			MuestraPersonas('tblConsulta', null);
		
			//Se asocia el evento click al Button [btnCreaTabla].
			$('#btnCreaTabla').on('click', function()
			{				
				//Se invoca a la función para crear y mostrar la tabla con un origen de datos.
				MuestraPersonas('tblConsulta', ObtenDatos());
			});		
		});
	</script>
</body>
</html>

En el siguiente enlace podrás descargar el código fuente completo:

Tabla con JQuery.rar (215,67 kb)

Comentarios (1) -

  • Habrá algún script para crear tables generando combinación de celdas?? 'colspan' 'rowspan'

Agregar comentario

Loading