En esta ocacion les cuento como crear una tabla dinamica a partir de datos en la WEB, debido a unos cambios en mi trabajo, hemos decido no ocupar Tablas dinamicas en EXCEL para los reportes gerenciales, y me di la tarea de buscar la forma de mostrarlas en WEB, y gracias a Daniel Hernandez encontre la solucion, se trata de un Framework en JAVA llamado OAT esta es la Pagina web.
Lo primero es descargar las librerias y Clases que nos serviran para crear la pagina, para ello descargamos este archivo.
OK ahora lo primero que debemos hacer es crear un directorio para ejemplo lo llamare PruebaTablaDinamica en var/www/ y luego una pagina HTML comun y corriente y la nombramos con cualquier nombre para este ejemplo la llamare Demo, debiendo escribir en el contenido lo siguiente:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<script type="text/javascript">
var featureList = ["pivot","statistics"];
</script>
<script type="text/javascript" src="oat/loader.js"></script>
<title></title>
</head>
<body>
</body>
</html>
como podemos ver en el codigo HTML no tiene nada nuevo excepto en el script var featureList = ["pivot","statistics"]; y el source respectivo oat/loader.js, El script "loader.js" se encarga de detectar que características queremos usar y generar dinámicamente todas las inclusiones de scripts necesarias para que funcionepues entonces necesitamos tener creada una carpeta oat dentro de PruebaTablaDinamica llamada oat con sus respectivos js, entonces descomprimiremos el archivo descargado de la pagina de Oat y dentro de el hay una carpeta llamda oat, copia esta carpeta y pegala en “var/wwww/PruebaTablaDinamica/”, esta carpeta oat es la que se utilizara siempre que desees hacer una tabla dinamica.
Ahora debemos crear la tabla pivotante, se deberia hacer una consulta a base de datos para ello sin embargo para hacer este ejemplo lo haremos con datos estaticos en el html solo para mostrar la funcionabilidad de las tablas dinamicas, entonces dentro de el documento html despues de <script type=”text/javascript” src=”oat/loader.js”></script> escribiremos lo siguiente:
<script type=”text/javascript”>
var cabecera = new Array(”Nombre”, “Edad”, “Carrera”, “Materia”, “Catedratico”, “Calificacion”);
var datos = new Array();
datos = new Array();
datos[0] = new Array(”Armando Diaz”, “26″, “Lic. en Informatica”, “Estadistica”, “Adolfo Jimenez”, “8″);
datos[1] = new Array(”Juan Perez”, “28″, “Ingenieria en Sistemas”, “Programacion IV”, “Jorge Aparicio”, “6″);
datos[2] = new Array(”Joel Campos”,”23″, “Administracion de Empresas”, “Estadistica”, “Adolfo Jimenez”, “7″);
datos[3] = new Array(”Karla Gonzalez”, “18″, “Contabilidad Publica”, “Administracion 1″, “Juan Gavidia”,”9″);
function init() {
var pTable = new OAT.Pivot(’tabla’, ”, ‘filtros’, cabecera, datos,
[0,1], [2,3], [4], 5, null);
pTable.go();
}
</script>
Bueno como vemos en lo anterior creamos un metodo tipo arreglo llamado cabecera el cual es como lo dice el nombre la cabecera de la tabla, luego creamos mas arreglos pero de datos osea la informacion a contabilizar, despues creamos la tabla con instanciando un metodo tipo Pivot con los respectivos parametros, las descripciones de estos se encuentran en la carpeta que descomprimiste del archivo que descargaste en oat-2.8/oat/docs. La pagina nos deberia quedar asi:
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=windows-1250″>
<script type=”text/javascript”>
var featureList = ["pivot","statistics"];
</script>
<script type=”text/javascript” src=”oat/loader.js”></script>
<script type=”text/javascript”>
var cabecera = new Array(”Nombre”, “Edad”, “Carrera”, “Materia”, “Catedratico”, “Calificacion”);
var datos = new Array();
datos = new Array();
datos[0] = new Array(”Armando Diaz”, “26″, “Lic. en Informatica”, “Estadistica”, “Adolfo Jimenez”, “8″);
datos[1] = new Array(”Juan Perez”, “28″, “Ingenieria en Sistemas”, “Programacion IV”, “Jorge Aparicio”, “6″);
datos[2] = new Array(”Joel Campos”,”23″, “Administracion de Empresas”, “Estadistica”, “Adolfo Jimenez”, “7″);
datos[3] = new Array(”Karla Gonzalez”, “18″, “Contabilidad Publica”, “Administracion 1″, “Juan Gavidia”,”9″);
function init() {
var pTable = new OAT.Pivot(’tabla’, ”, ‘filtros’, cabecera, datos,
[0,1], [2,3], [4], 5, null);
pTable.go();
}
</script>
<title></title>
</head>
<body>
<div id=”filtros”></div>
<div id=”tabla”></div>
</body>
</html>
Analizando un poco los parametros que recibe el metodo: el primero (en ejemplo [0,1]), se refiere a los campos que se mostraran en las filas, el segundo (en ejemplo [2,3]) se refiere a las columnas, el tercero (en ejemplo [4]), son los filtros que se utilizara (parte superior) y el cuarto (en ejemplo 5) es el campo que se contara.
Pues con esto ya esta creada tu pagina WEB con una tabla dinamica, puedes probarla digitando en la barra de direcciones de tu explorador:
http://localhost/PruebaTablaDinamica/Demo.html
Te mostrar la siguiente pagina:
No se ve muy vistoso verdad? pero eso tiene arreglo, dentro de la carpeta oat que descargaste hay un directorio llamado Styles, pues abres ese directorio, copias el archivo pivot.css y lo pegas en /var/www/PruebaTablaDinamica/Styles (creas la carpeta Styles en tu sitio), este archivo contiene una hoja de estilo para las tablas. ahora debes agregar la referencia a la hoja de estilos dentro de la pagina html, para ello debes digitar abajo del header lo siguiente:
<link rel=”StyleSheet” href=”Styles/pivot.css” type=”text/css”>
Entonces el html te deberia quedar de esta forma:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="StyleSheet" href="Styles/pivot.css" type="text/css">
<script type="text/javascript">
var featureList = ["pivot","statistics"];
</script>
<script type="text/javascript" src="oat/loader.js"></script>
<script type="text/javascript">
var cabecera = new Array("Nombre", "Edad", "Carrera", "Materia", "Catedratico", "Calificacion");
var datos = new Array();
datos = new Array();
datos[0] = new Array("Armando Diaz", "26", "Lic. en Informatica", "Estadistica", "Adolfo Jimenez","8");
datos[1] = new Array("Juan Perez", "28", "Ingenieria en Sistemas", "Programacion IV", "Jorge Aparicio", "6");
datos[2] = new Array("Joel Campos","23", "Administracion de Empresas", "Estadistica", "Adolfo Jimenez", "7");
datos[3] = new Array("Karla Gonzalez", "18", "Contabilidad Publica", "Administracion 1", "Juan Gavidia","9");
function init() {
var pTable = new OAT.Pivot("tabla", "", "filtros", cabecera, datos,
[0], [], [1,0,3,2,4], 5, 1);
pTable.go();
}
</script>
<title></title>
</head>
<body>
<div id="filtros"></div>
<div id="tabla"></div>
</body>
</html>
Con esto ya cobra mas vistosidad nuestra tabla, puedes modificar los colores que utlizara la tabla en pivot.css con colores en hexadecimal, al final nos quedara la tabla como muestro en las capturas siguientes:
Para explircar un poco como funciona:
- Si cambiamos el valor del combo, la tabla muestra solo los datos para el valor del combo seleccionado.
- Si pinchamos y arrastramos el nombre de una fila o columna, podemos colocarla donde queramos, incluso sacarla de la tabla y ponerla como filtro.
- Si pinchamos en la “X” roja al lado de los filtros, el campo pasa a la tabla.
- Si pinchamos en los nombres de las columnas (sin arrastrar), aparecen opciones de ordenación.
- Si pinchamos en el nombre del dato que se muestra en el cuepor de la tabla (”valor” en nuestro caso) aparecen opciones para pintar los datos en un formato u otro (como números enteros, como moneda…) y otras.
Tambien podemos cambiar la funcion resultado, para poder contar, sumar, promedio, media, etc, para ello se debe agregar en el html lo siguiente:
var aggRef = function() {
pTable.options.agg = parseInt($v("pivot_agg"));
pTable.go();
}
/* create agg function list */
OAT.Dom.clear("pivot_agg");
for (var i=0;i<OAT.Statistics.list.length;i++) {
var item = OAT.Statistics.list[i];
OAT.Dom.option(item.shortDesc,i,"pivot_agg");
if (pTable.options.agg == i) { $("pivot_agg").selectedIndex = i; }
}
OAT.Dom.attach("pivot_agg","change",aggRef);
Entonces el HTML te quedara asi:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="StyleSheet" href="Styles/pivot.css" type="text/css">
<script type="text/javascript">
var featureList = ["pivot","statistics"];
</script>
<script type="text/javascript" src="oat/loader.js"></script>
<script type="text/javascript">
var cabecera = new Array("Nombre", "Edad", "Carrera", "Materia", "Catedratico", "Calificacion");
var datos = new Array();
datos = new Array();
datos[0] = new Array("Armando Diaz", "26", "Lic. en Informatica", "Estadistica", "Adolfo Jimenez","8");
datos[1] = new Array("Juan Perez", "28", "Ingenieria en Sistemas", "Programacion IV", "Jorge Aparicio", "6");
datos[2] = new Array("Joel Campos","23", "Administracion de Empresas", "Estadistica", "Adolfo Jimenez", "7");
datos[3] = new Array("Karla Gonzalez", "18", "Contabilidad Publica", "Administracion 1", "Juan Gavidia","9");
function init() {
var pTable = new OAT.Pivot("tabla", "", "filtros", cabecera, datos,
[0], [], [1,0,3,2,4], 5, 1);
var aggRef = function() {
pTable.options.agg = parseInt($v("pivot_agg"));
pTable.go();
}
/* create agg function list */
OAT.Dom.clear("pivot_agg");
for (var i=0;i<OAT.Statistics.list.length;i++) {
var item = OAT.Statistics.list[i];
OAT.Dom.option(item.shortDesc,i,"pivot_agg");
if (pTable.options.agg == i) { $("pivot_agg").selectedIndex = i; }
}
OAT.Dom.attach("pivot_agg","change",aggRef);
pTable.go();
}
</script>
<title></title>
</head>
<body>
<select id="pivot_agg"></select>
<div id="filtros"></div>
<div id="tabla"></div>
</body>
</html>
Bueno eso seria todo, espero ayude, por ultimo dejo una imagen ya con todo y todo.
Archivado bajo: General, Otras, Programacion
