Tablas Dinamicas en WEB

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.

Anuncios

14 comments so far

  1. Bookmarks about Tablas on

    […] – bookmarked by 1 members originally found by nordinee on 2008-09-22 Tablas Dinamicas en WEB https://armandodiaz.wordpress.com/2008/06/14/tablas-dinamicas-en-web/ – bookmarked by 2 members […]

  2. Anibal Urbiola on

    Estimado Armando Diaz;

    Agradeciendote de antemano por la publicacion te cuento que he tratado de implementar el codigo que nos buenamente nos brindas pero lamentablemente no he podido implementar el array de javascript datos[]. Sucede que lleno el array por medio de PHP y luego tratao de pasarlo a javascript pero luego la funcion ini() al parecer no reconoce el array que he armado. Te envío el codigo que he armado esperando tu pronta respuesta que es suma urgencia por favor.

    El array $registro[] lo armo en php usando la funcion mysql_fetch_array; claro esta que acceso con eso a mi base de datos para obtener la informacion.

    var cabecera = new Array();

    var datos = new Array();

    <?php
    for ($i = 0; $i

    function init() {
    var pTable = new OAT.Pivot(“tabla”, “”, “filtros”, cabecera, datos, [0,1], [3,4], [2], 5, null);

    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();

    • fernando on

      Hola
      Pudiste resolver el problema
      yo ando en al misma
      te agradeceria si me puedes orientar
      saludos cordiales

  3. Roberto on

    hola!!
    A mi me funciono estupendo!!. Lo unico que tiene son algunas restricciones de la cantidad de columna a manipular en la tabla y detellaes, al menos esta configuracion de tabla, como que le sexta columna que definas sera la que sume, cuente, etc. De cualquier forma me parecio genial, gracias por el aporte esta bunisimo, como les digo a mi me funciona “FILETE!!!”

    saludos

    roberto

    • Karen on

      Hola Roberto, me podrías ayudar en como hiciste la conección a la base de datos. Yo estoy tratando de conectarme a una base de datos sql local para consultar una tabla y no me resulta.

      gracias.

  4. juan carlos mejia orozco on

    felicitacion por tu articulo, excelente,

    quiero preguntarte si el solo soporte una columna para el conteo o el total, o si puede meter varias columnas para totalizar?.

    muchas gracias.

    • armandodiaz on

      Hasta esa version, solo se podia totalizar una ya que recibia un solo argumento en lugar de un arreglo, bueno pues habria que ver si hay alguna actulizaciòn al framework, el parametro esta en [0,1], [2,3], [4], 5, null); (numero 5).
      Saludos.

  5. Susana Roman Rojas on

    Tu código puede usarse en jsf, IDE netbeans 8.0 y S.O. Windows???????? server apache tomcat

  6. hoover on

    doctores esta estupendo, para recalcar el numeo de columnas a mi me funciona perfectamente con 20 columnas

  7. Cristian Cisternas on

    fue un gusto que comenten sobre el Framework OAT, por trabajo tuve que incursionar y se pudo hacer llamadas a la base de datos mysql con php y pasarlas como parámetros a las tablas de OAT, todo me funciona excelente, mi único problema es cargar los gráficos de mi tabla estos salen solo en columna X e Y, y no al lado como los muestra el demo.

    SI alguien a trabajado con los gráficos seria de ayuda!

  8. Juan Manuel Carballo on

    Hola una pregunta puedes poner descargable to codigo.

    Saludos y gracias

  9. ber on

    Como se haria esto con base de datos…!!! Yo creo una tabla dinamica con javascript en donde le agrego n columnas y n filas, desde un documento php.

    Quisiera saber para el registro y consulta de tabla dinamica.

  10. undest on

    Muchas gracias muy bueno el tutorial 😉

  11. cesar on

    Quisiera insertar una tabla donde el usuario pudiera editar y guardar datos, es decir, que los numeros los pone el usuario y no yo.

    Quisiera saber si esto es posible con la tabla creada o hace falta algo en el codigo.

    Muchas gracias


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: