Una de las formas más habituales de mostrar grandes cantidades de datos por pantalla es a través de una tabla. Vamos a ver cómo podemos contruir una:

  1. El primer paso es crear un proyecto o elegir uno que ya tengamos.
  2. A continuación, crearemos la estructura de la tabla con los datos en un archivo html que tengamos y añadimos los estilos que queremos que tenga nuestra tabla para darle un formato a nuestro gusto. En mi caso, todo esto lo he hecho en el archivo “index.html”.

Este sería el resultado final de la tabla, los estilos los he obtenido de jQueryMobile para que quede algo mejor:

<table data-role="table" id="table-custom-2" class="ui-body-d">
			<thead>
				<tr class="ui-bar-d">
					<th>Cabecera 1</th>
					<th>Cabecera 2</th>
					<th>Cabecera 3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Fila 1 Col. 1</td>
					<td>Fila 1 Col. 2</td>
					<td>Fila 1 Col. 3</td>
				</tr>
				<tr>
					<td>Fila 2 Col. 1</td>
					<td>Fila 2 Col. 2</td>
					<td>Fila 2 Col. 3</td>
				</tr>
				<tr>
					<td>Fila 3 Col. 1</td>
					<td>Fila 3 Col. 2</td>
					<td>Fila 3 Col. 3</td>
				</tr>
			</tbody>
		</table>

De esta manera los datos de la tabla son fijos y los creamos cuando construimos la tabla, pero hay métodos para ir poblando automáticamente nuestra tabla en función de los datos que tengamos en otro lugar como por ejemplo una base de datos o un fichero. Para hacerlo de forma automática hay que usar funciones javascript.

En mi caso he creado un archivo javascript llamado “misJs.js” donde he definido la función que rellenará la tabla automáticamente.

function poblarTabla(){
	var contadorFila;
	var contadorColumna;
 
	$('#tabla-automatica').html(
			'<thead><tr class="ui-bar-d">' +
				'<th>Cabecera 1</th>' +
				'<th>Cabecera 2</th>' +
				'<th>Cabecera 3</th>' +
			'</tr></thead>');
 
	for (contadorFila = 1; contadorFila <= 3; contadorFila++){
		$('#tabla-automatica').append('<tr id="fila' + contadorFila + '">');
 
		for (contadorColumna = 1; contadorColumna <= 3; contadorColumna++){
			$('#fila' + contadorFila).append('<td id="columna' + contadorColumna + '">Fila ' + contadorFila +' Col. ' + contadorColumna +'</td>');
		}
	}
}

Y este es el resultado final en el smartphone. En otro momento ya explicaré cómo obtener los datos desde una base de datos.

Ejemplo de tabla en smartphone con Phonegap

Ejemplo de tabla en smartphone con Phonegap

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Post Navigation

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies