El consumo de información accediendo a bases de datos es clave para cualquier tipo de aplicación, por lo que es necesario que el consumo de la información se lleve a cabo en el menor tiempo posible y utilizando el menor número de recursos del servidor; esto con el fin de mejorar el tiempo de respuesta de las aplicaciones.

Es un hecho que muchas veces los desarrolles se enfrentan al reto de mostrar una consulta de información en un grid, el cual en todos los casos debe de tener elementos gráficos de paginación para que el usuario pueda navegar entre el conjunto de datos. En el escenario que se plantea, generalmente los desarrolladores hacen uso de malas prácticas, y a que voy con esto, a que por facilidad obtienen todo el conjunto de información de la base de datos y en capas superiores de la arquitectura de su aplicación empiezan a paginarla para cargarla en el grid para cada una de las paginas, lo que realmente es un consumo incorrecto de la información, ya que la manera más correcta de llevar a cabo el proceso es solicitar solamente aquellos datos que necesitas mostrar al usuario para la página que desea visualizar del grid, logrando así un óptimo tiempo de respuesta en la aplicación tanto en la visualización y paginación de la información en el grid.

A continuación te presento un ejemplo de cómo crear consultas paginadas desde base de datos, el cual puedes tomar como referencia para crear las consultas de datos de tus proyectos.

Creación de Base de Datos de Prueba:

create database BD_Pruebas;

use BD_Pruebas;

create table Persona
(
personaId int not null auto_increment primary key,
nombre varchar(20) not null,
apellidoPaterno varchar(20) not null,
apellidoMaterno varchar(20) not null,
genero varchar(9) not null,
fechaNacimiento datetime not null,
fechaCreacion datetime not null,
activo tinyint(1) not null
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Creación de Insumos:

INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Armando','Rosales','Maza','Masculino','1988-10-12',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Luis','Perez','Hernandez','Masculino','1980-10-01',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Andrea','Sanchez','Gonzalez','Femenino','1988-01-20',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Monica','Lopez','Jimenez','Femenino','1970-09-15',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Hugo','Morales','Quiroz','Masculino','1985-04-18',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('David','Gonzalez','Rodriguez','Masculino','2000-01-29',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Karime','Lozano','Herrera','Femenino','1995-11-15',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Mario','Fernandez','Gutierrez','Masculino','2001-04-17',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Liliana','Duran','Roano','Femenino','1984-09-25',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Francisco','Zuñiga','Zapata','Masculino','1990-01-06',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Diego','Martinez','Roman','Masculino','1986-02-14',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Jimena','Ortiz','Morales','Femenino','1993-12-24',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Tania','Ordaz','Montiel','Femenino','1987-07-05',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Ana','Arriaga','Linares','Femenino','1996-10-16',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Alejandra','Tamez','Vazquez','Femenino','2002-05-28',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Francisco','Mota','Marin','Masculino','1978-06-29',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Martin','Lutero','Lara','Masculino','1980-09-25',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Kendra','Muñiz','Mora','Femenino','1976-01-20',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Cristian','Beltran','Solis','Masculino','1987-11-15',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Natalia','Montes','Herrera','Femenino','1987-03-16',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Kenia','Martinez','Rodriguez','Femenino','1994-04-27',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Ricardo','Maldonado','Soto','Masculino','1998-11-02',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Susana','Perez','Lopez','Femenino','1992-05-20',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Ingrid','Solano','Jimenez','Femenino','1998-09-28',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Gerardo','Montiel','Oronzor','Masculino','1970-01-09',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Gabriel','Robles','Martinez','Masculino','1978-05-24',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Fany','Roman','Nuñez','Femenino','1990-08-09',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Jamil','Morales','Santos','Masculino','1996-12-23',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Tamara','Sanchez','Ramirez','Femenino','1970-01-02',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Bernardo','Lopez','Gonzalez','Masculino','1995-10-10',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Jaime','Jimenez','Sandria','Masculino','1980-12-10',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Mabel','Fernandez','Martinez','Femenino','1997-05-12',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Jacobo','Montes','Ortiz','Masculino','1978-06-22',now(),1);
INSERT INTO `bd_pruebas`.`persona`(`nombre`,`apellidoPaterno`,`apellidoMaterno`,`genero`,`fechaNacimiento`,`fechaCreacion`,`activo`) 
VALUES ('Maria','Duran','Zamora','Femenino','1999-09-07',now(),1);

Procedimiento almacenado para encapsular la función de paginación y su respectiva invocación.

delimiter //
create procedure ObtenDatosPaginados(in numeroPagina int, in tamanioPagina int)
begin
	if (numeroPagina < 1 or tamanioPagina < 1) then
		select *, 0 as 'TotalRegistros', 0 as 'TotalPaginas' 
        from Persona
		limit 0,0;
	else
		begin
			declare _totalRegistros int default (select count(*) from Persona);                        
            declare _totalPaginas int default 0;
            declare _offset int default 0;            
                        		
            if ((_totalRegistros % tamanioPagina) = 0) then
				set _totalPaginas = _totalRegistros / tamanioPagina;                
			else
				set _totalPaginas= floor((_totalRegistros / tamanioPagina) + 1);                
            end if;
			
            set _offset = tamanioPagina * (numeroPagina - 1);                      
						
			select *, _totalRegistros as 'TotalRegistros', _totalPaginas as 'TotalPaginas'
			from Persona			
            order by nombre
            limit _offset, tamanioPagina;
        end;
	end if;
end
//
delimiter ;

call ObtenDatosPaginados(1,10);

El siguiente fragmento de código te ayudara a invocar la App de WhatsApp desde una Activity con el fin de poder enviar un whats a un número de teléfono en específico.

private void AbrirWhatsApp(String telefono)
{
	Intent _intencion = new Intent("android.intent.action.MAIN");
	_intencion.setComponent(new ComponentName("com.whatsapp","com.whatsapp.Conversation"));
    _intencion.putExtra("jid", PhoneNumberUtils.stripSeparators("521" + telefono)+"@s.whatsapp.net");
    startActivity(_intencion);
}

En el presente post te presento la forma de contar las vocales de un párrafo utilizando JQuery.

ConteoVocales.html

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'/>
	<title>Conteo de vocales</title>
</head>
<body>
	<label for='instrucciones'>Ingresa un párrafo:</label>
	</p>
	<textarea id='txtEntrada' rows='5' cols='50' style='resize:none;'></textarea>
	</p>
	<button type="button" id="btnContarVocales" name="btnContarVocales">
		Contar vocales
	</button>  
	<script src="../scripts/jquery-3.1.1.min.js"></script>
	<script type='text/javascript'>   
        $(document).ready(function()
        {         
            //Se asocia el evento click al Button [btnContarVocales].
            $('#btnContarVocales').on('click', function()
            {   
				/*
				Se obtiene el texto ingresado, se le quitan los espacios en blanco,
				se convierte a minusculas y se encapsula en la variable '_parrafo'.				
				*/
				var _parrafo= ($('#txtEntrada').val()).replace(/ /gi, '').toLowerCase();
            
				/*
				Se crea el arreglo '_vocales' con los caracteres que vamos a contabilizar.
				*/
                var _vocales = [ 'a', 'e', 'i', 'o', 'u'];
				
				/*
				Se crean e inicializan variables para encapsular el conteo de cada una 
				de las vocales.
				*/
				var _contadorA= 0;
				var _contadorE= 0;
				var _contadorI= 0;
				var _contadorO= 0;
				var _contadorU= 0;				

				/*
				Se recorre el texto encapsulado en la variable '_parrafo' y de acuerdo al
				caracter recorrido se va aumentando el contador relacionado con cada una 
				de las vocales segun corresponda.
				*/
				for(var i=0; i < _parrafo.length; i++)
				{
					switch(_parrafo[i])
					{
						case 'a':
						{
							_contadorA++;
							break;							
						}
						case 'e':
						{
							_contadorE++;
							break;							
						}
						case 'i':
						{
							_contadorI++;
							break;							
						}
						case 'o':
						{
							_contadorO++;
							break;							
						}
						case 'u':
						{
							_contadorU++;
							break;							
						}						
					}					
				}
				
				/*
				Se encapsula en la variable '_resultado' un mensaje con las vocales 
				y sus respectivos contadores.
				*/
				var _resultado= 'El resultado del conteo es el siguiente:\n\n' + '[a]: ' +  _contadorA + '\n[e]: ' + _contadorE + '\n[i]: ' + _contadorI + '\n[o]: ' + _contadorO + '\n[u]: ' + _contadorU;
				
				/*
				Se despliega en pantalla el resultado encapsulado en la variable '_resultado'
				*/
				alert(_resultado);
            });     
        });
    </script>
</body>
</html>

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

ConteoVocales.rar (29,97 kb)

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)