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)