Ahora la moda en el desarrollo de front-end de una aplicación web, se
basa simplemente en usar javascript, css y html5 (2015 en este año escribo
estos párrafos y ya pienso que está pasando de moda, jeje), y solamente con
estas 3 tecnologías se logran cosas maravillosas, es más al usar solo estas
tres tecnología no recurrimos a hacer llamadas al servidor (postback) y se da al usuario una experiencia ágil en la carga de los datos; yo aun desarrollo front-end con tecnologías que hacen postback al servidor para
pintar controles del servidor y cargar datos en grillas\tablas dinámicas; siguiento esto en lo
personal me gusta solo usar javascript y no recurrir a Apis de JS como JQuery,
no es que sea mala, antes al contrario es muy buena para mejorar el tiempo de
desarrollo, pero me gusta más desarrollar con el origen de las cosas (puede ser que por esta razón ya seré desarrollador clásico, jeje).
Hoy se me a ocurrido como practica de estas tecnología y para reforzar
conocimiento un poco en ellas (aun que lo desarrollado aquí se puede haber codificado hace
mucho tiempo atrás), crear una
tabla dinámica que se llene con un objeto que este en formato JSON, ¿por qué
JSON?, pues porque ya casi todo se está comunicando en este tipo de formato, y
una de sus razones digámosle de forma simple, es que es fácil y rápido para
retornar y manejar la información contenida en un objeto JSON, bueno a exención
de las fechas :/, aún se me presentan
problemas en la conversión de este tipo de dato.
Bueno, empecemos …
Básicamente la idea gira en el manejo de las 3 tecnologías, se usa el
html para identificar el lugar donde se visualizara la tabla dinámica, se usa
css para darle un estilo personalizado y se usa javascript para crear la tabla
de forma dinámica. La parte fuerte de todo, está en javascript, algunos dirán,
“oye, eso es pan comido si usas JQuery”, o “ya existen tablas o Apis que hacen
esto”, si, si están en toda su razón, pero vamos, me gusta darle el toque
personal o impersonal a mis cosas, eso es arte.
Sigamos …
En la parte html me gustaría un código limpio, y que más limpio que
usar una etiqueta div que solo identifica el lugar donde aparecerá nuestra
tabla, este seria el código:
<div id="divTabla1"></div>
La podemos acompañar del atributo class si quieren pero por el momento
vamos bien así.
Ahora la parte javascript, la explico ahora porque si explico el css
antes nos podemos confundir en el nombramiento de nuestras clases de estilo.
En javascript pienso en una función que al llamarla me cree todo, si,
si ya escucho sus pensamientos “divide y vencerás”, bueno pues para nuestra versión
0.0.1, va hacer una sola función y siii espagueti, vamos bien muchach@s, funciona,
más adelante la optimizamos para nuestras próximas entregas, nuestro cliente
nos está respirando en la nuca, pensemos en metodologías agiles para entregas
rápidas, escucho de nuevo “pura carreta”, jejeje, créanme, a veces pienso lo
mismo.
Nuestra función se definirá con tres parámetros de entrada, el primer parámetro es el identificar
de nuestro elemento div que está en el html y es el que identifica donde aparecerá
la tabla dinámica, el identificador que le designamos fue “divTabla1”, el
objetivo de este parámetro es para obtener nuestro objeto div y para crear
identificadores dinámicos para los sus elementos hijos; el segundo parámetro es el nombre de clase de estilo (atributo
class) para la etiqueta div, el por qué la envió como parámetro, pues, pienso
en que se podría definir diferentes estilos para la visualización de la tabla y
con esto tenemos la salvedad de que la función javascript se encargue de ello,
también la podemos usar para crear nombre de clases de estilo para los
elementos hijos pero eso será para otra versión; el tercer parámetro pues es nada más y nada menos que el objeto
JSON y es con el que vamos a llenar la tabla en este caso se ha creado una
función java script que retorna el objeto JSON, es el siguiente.
function obtenerObjJson() {
var obj = [{ "Titulo1": "Titulo uno A", "Titulo2": "Titulo dos A", "Titulo3": "Titulo tres A", "Titulo4": "Titulo cuatro A", "Titulo5": "05/04/2015
09:59" }
, { "Titulo1": "Titulo uno B", "Titulo2": "Titulo dos B", "Titulo3": "Titulo tres B", "Titulo4": "Titulo cuatro B", "Titulo5": "05/04/2015 10:00" }
, { "Titulo1": "Titulo uno C", "Titulo2": "Titulo dos C", "Titulo3": "Titulo tres C", "Titulo4": "Titulo cuatro C", "Titulo5": "05/04/2015 10:15" }
, { "Titulo1": "Titulo uno D", "Titulo2": "Titulo dos D", "Titulo3": "Titulo tres D", "Titulo4": "Titulo cuatro D", "Titulo5": "05/04/2015 10:30" }
, { "Titulo1": "Titulo uno E", "Titulo2": "Titulo dos E", "Titulo3": "Titulo tres E", "Titulo4": "Titulo cuatro E", "Titulo5": "05/04/2015 10:45" }];
, { "Titulo1": "Titulo uno B", "Titulo2": "Titulo dos B", "Titulo3": "Titulo tres B", "Titulo4": "Titulo cuatro B", "Titulo5": "05/04/2015 10:00" }
, { "Titulo1": "Titulo uno C", "Titulo2": "Titulo dos C", "Titulo3": "Titulo tres C", "Titulo4": "Titulo cuatro C", "Titulo5": "05/04/2015 10:15" }
, { "Titulo1": "Titulo uno D", "Titulo2": "Titulo dos D", "Titulo3": "Titulo tres D", "Titulo4": "Titulo cuatro D", "Titulo5": "05/04/2015 10:30" }
, { "Titulo1": "Titulo uno E", "Titulo2": "Titulo dos E", "Titulo3": "Titulo tres E", "Titulo4": "Titulo cuatro E", "Titulo5": "05/04/2015 10:45" }];
return obj;
}
Voy a describir con palabras que hace la función javascript que crea
la tabla, luego pueden ver el código o descargarlo o hacer referencia a él con
los link que les dejo mas abajo.
function crearTablaSimple(divTabla, classDivTabla, objJson){
var contenedorTabla;
var fTemp;
var i, j;
var arrayClaves = new Array();
var classFilaDatos = "TBLFilaDatosPar"; //indica fila impar
try{
contenedorTabla =
document.getElementById(divTabla);
contenedorTabla.className =
classDivTabla;
fTemp = objJson[0];
…
La función la he nombrado crearTablaSimple,
inicia creando las variables necesarias en este caso la variable que contendrá
el div (contenedorTabla), una varia que contendrá una fila temporal del objeto
JSON (fTemp), unas variables para recorridos de ciclo (i, j), un array para
tener los keys (claves) del objeto JSON (un objeto JSON consta de elementos
clave-valor)(arrayClaves) y una variable con el nombre de la clase de estilo
para las filas de datos pares (classFilaDatos).
Luego asignamos la clase de estilo al div, para asignar a fTemp el
primer elemento del objeto JSON.
…
var tabla =
document.createElement("table");
tabla.id = divTabla + "TBL";
…
Luego creamos el objeto tabla, al cual le asignamos un identificador
en base al identificador del div de esta forma podemos tener varios div en los
cuales se carguen diferentes tablas.
…
var fila =
document.createElement("tr");
fila.id = divTabla + "TBLCabecera";
fila.className
= "TBLCabecera";
var celda;
…
Luego creamos un objeto fila (tr), que será la fila de cabecera, a
esta le asignamos un identificar en base al identificador del div y le
asignamos una clase de estilo fijo denominado “TBLCabecera”.
…
for (i in fTemp) {
arrayClaves.push(i);
celda = document.createElement("th");
celda.innerHTML = i;
fila.appendChild(celda);
}
tabla.appendChild(fila);
contenedorTabla.appendChild(tabla);
…
Luego creamos un ciclo con el fin de llenar el array arrayClaves con
todos los nombres de las claves del objeto JSON, en este ciclo creamos las
columnas o celdas de la fila de cabecera de la tabla, asignándole el nombre de
las claves del objeto JSON, cada celda se agrega a su padre o sea a la fila de
cabecera. Al terminar el ciclo agregamos la fila de cabecera a la tabla y la
tabla se la agregamos a nuestro elemento div, que dentro de la función la
llamamos “contenedorTabla”. Siii los escuche “pero por que no usa arrayClaves”
y si solo lo uso para almacenar el nombre de las claves del JSON, pero vamos un
respiro, es para usarlo en versiones futuras :).
…
i=0;
for(i; i < objJson.length;
i++){
fTemp = objJson[i];
fila = document.createElement("tr");
fila.id = divTabla + "tblDatos" + i;
fila.className = classFilaDatos;
if(classFilaDatos === 'TBLFilaDatosPar'){
classFilaDatos = 'TBLFilaDatosImpar';
}else{
classFilaDatos = 'TBLFilaDatosPar';
}
…
Luego iniciamos otro ciclo en base al tamaño o al número de elementos
del objeto JSON; en este ciclo usamos de nuevo la variable fTemp para ir
almacenando cada uno de los elementos del JSON encda recorrido del ciclo,
creamos también un elemento fila que le asignamos un id en base al id del div y
del número de elemento correspondiente en el objeto JSON y le asignamos la
clase de estilo almacenada en la variable classFilaDatos, el objeto de esta
variable es asignarle a cada fina un estilo dependiendo de si la fila es par o
impar, seguido viene un if que realiza este trabajo, están simple como
preguntar qué valor tienen esa variable para cambiarlo a otro valos.
…
for(j in fTemp){
celda = document.createElement("td");
celda.innerHTML = fTemp[j];
fila.appendChild(celda);
}
tabla.appendChild(fila);
}
}
…
Ahora dentro de este ciclo tenemos otro ciclo el cual va a recorrer
los elementos clave valor del JSON, en este ciclo interno creamos una celda a
la cual le asignamos el valor de uno de los elemento del JSON, agregamos esta
celda a la fila correspondiente y al finalizar el ciclo interno, agregamos la
fila a la tabla, para continuar con el recorrido del siguiente elemento del
JSON, aclaro que el objeto JSON es un array y cada elemento es un objeto en
formato JSON que es lo que se recorre en el ciclo interno.
Pues es más fácil seguir el código que las palabras digo yo, porque a
la final son más las palabras para explicar que el código, y si, porque pensé
que haría esto en dos hojas y ya llevo cuatro y una tarde de chelas perdida, no
es tan ágil lo ágil, a la final se hace el mismos trabajo pero de forma
diferente, jeje.
Ahora los estilos, con lo anterior ya te puedes imaginar las clases de
estilos, porque en el código javascript se ha definido nombres de clase de
estilo fijos, la base parte del nombre de la clase de estilo para el div que va
a contener la tabla de aquí en adelante se usa en diseño de caja la definición
de los estilos para los elementos table, tr, th, td y las clases de estilo
fijas “TBLCabecera”, “TBLFilaDatosPar” y “TBLFilaDatosImpar”, dejo el código
para que lo ojeen.
.classTablaSimple{
padding: 0rem;
margin: 0rem;
width: 100%;
}
.classTablaSimple table{
width: 100%;
border-collapse: collapse;
border-spacing: 0rem;
}
.classTablaSimple table tr{
/*border:
solid 0.1rem;*/
}
.classTablaSimple table tr th, td{
border: solid 0.1rem;
border-color: #bbb;
}
.classTablaSimple table .TBLCabecera{
background-color: #2dc157;
color: #fff;
}
.classTablaSimple table .TBLFilaDatosPar{
background-color: #eae87c;
}
.classTablaSimple table .TBLFilaDatosImpar{
background-color: #b2d7b4;
}
Si le quieres dar un estilo, pues simple modifica los estilos css definidos
y ya, puedes agregarle cosas o hasta clases de estilo pero para ello debes
modificar el código de javascript, pero eso es pan comido ahora que sabes cómo
funciona.
en este link a github se encuentra el codigo en tres diferentes archivos
en este link a github se encuentra el codigo en tres diferentes archivos
- cssTbld.css: es el archivo de estilos
- tbld.html: es el html que puedes abrir en el navegador despues de que descargues el código.
- jsTbld.js: es la función javascript que crea la tabla.
El ejemplo lo puedes ver en acción con el siguiente botón
(clic), creara una tabla dinámica gracias a una librería js que tengo hosteada
en google y en donde se ha definido la función javascript aquí mencionada, le
hace falta los estilos pero funciona y cumple con el objetivo.
Bueno espero a ver ayudado al necesitado y al que no, al que también y
al contrario.
Como siempre happy coding :).
