Ejemplo: Crear tablas dinamicas con Jquery y Base de Datos

ACtualizado: 1/2/2012

Hemos actualizado los estilos del código adaptandolos a un nuevo plugin del blog

Hace un rato Martha nos solicitaba ayuda para combinar una base de datos y el plugin treetable de Jquery y así crear una tabla dinámica.

Así que después de un rato haciendo las pruebas aquí está.
Siento la tardanza pero es la primera vez que usaba la base de datos de las demo y he tenido que configurar todo :P

Estructura de la base de datos

Lo primero es establecer la estructura.
Será bastante sencilla tenemos 2 tablas:

La primera tabla se llama ‘proyectos’ y tiene 3 campos: idProyecto, nombreproyecto y claveProyecto
Y la segunda se llama actividad y tiene los campos: idActividad, nombreActividad y idProyecto.

El campo actividad.idproyecto hace referencia a proyectos.idproyecto

El SQL entonces nos queda de la siguiente forma:
 
 
 
 
 
 
 
 

CREATE TABLE IF NOT EXISTS `actividad` (
  `idActividad` INT(11) NOT NULL AUTO_INCREMENT,
  `nombreActividad` VARCHAR(200) NOT NULL,
  `idProyecto` INT(11) NOT NULL,
  PRIMARY KEY (`idActividad`),
  KEY `idProyecto` (`idProyecto`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
 
INSERT INTO `actividad` (`idActividad`, `nombreActividad`, `idProyecto`) VALUES
(1, 'que seria exactamente esto?', 1),
(2, 'pues algo sera...', 1),
(3, 'escribir sobre oracle', 2),
(4, 'escribir este ejemplo', 2);
 
 
CREATE TABLE IF NOT EXISTS `proyectos` (
  `idProyecto` INT(11) NOT NULL AUTO_INCREMENT,
  `nombreProyecto` VARCHAR(200) NOT NULL,
  `claveProyecto` VARCHAR(200) NOT NULL,
  PRIMARY KEY (`idProyecto`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
 
 
INSERT INTO `proyectos` (`idProyecto`, `nombreProyecto`, `claveProyecto`) VALUES
(1, 'Proyecto number one', 'clave1'),
(2, 'Proyecto Skamasle', 'sinclave');
 
 
ALTER TABLE `actividad`
  ADD CONSTRAINT `actividad_ibfk_1` FOREIGN KEY (`idProyecto`) REFERENCES `proyectos` (`idProyecto`) ON DELETE NO ACTION ON UPDATE CASCADE;

La pagina con PHP

La pagina sigue teniendo la misma estructura, los códigos Cascading Style Sheets CSS y Javascript.

Lo que nos interesa es la parte donde se crea la tabla. Si hemos seguido el ejemplo en HTML plano

Veremos que se sigue respetando toda la estructura del head solo que se quita una columna ya que en este caso solo vamos a mostrar dos.

Esto también hace que tengamos que modificar los &nbsp de los subnodos.

La página se estructura en 3 partes:

1. El código para conectar a la base de datos:

//Extraccion de datos de la BD
$con = mysql_connect('localhost', 'root','') or die(mysql_error());
mysql_select_db('treetable', $con);

2. La inserción de nodos principales:

//sacamos los proyectos!
$query = mysql_query("SELECT * FROM proyectos");
while($proyecto = mysql_fetch_array($query))
{
	echo '<tr id="node-'.$proyecto['idProyecto'].'">'.chr(13).
			'<td>'.chr(13).
				'<span class="folder">'.$proyecto['nombreProyecto'].'</span>'.chr(13).
			'</td>'.chr(13).
			'<td>'.$proyecto['claveProyecto'].'</td>'.chr(13).
		  '</tr>'.chr(13);

Dentro del segundo código se inserta el 3er y último código y es el que sacará los sub-nodos de cada nodo.

//aqui van los sub-nodos (las actividades)
	$query2 = mysql_query("SELECT * FROM actividad WHERE idProyecto = ".$proyecto['idProyecto']);
	while($actividad = mysql_fetch_array($query2))
	{
	  echo '<tr id="node-'.$proyecto['idProyecto'].$actividad['idActividad'].'0" class="child-of-node-'.$proyecto['idProyecto'].'">'.chr(13).
				'<td>'.chr(13).
					'<span class="file">'.$actividad['nombreActividad'].'</span>'.chr(13).
				'</td>'.chr(13).
				'<td>&nbsp;</td>'.chr(13).
			'</tr>';
	}

Se usan los id de cada registro como id en el html y en los subnodos se usa el id del proyecto, el id de la actividad y un 0 para evitar problemas cuando se llegue a 10 proyectos.

Este sería un ejemplo básico y sencillo de como usar los datos de una Base de datos e insertarlos dentro de nuestras tablas dinamicas creadas con jquery y treetables.

La tabla se puede complicar tanto como queramos y seamos capaces de entender.

Agradesco desde aqui a Martha por exponer su duda y darnos la posibilidad de utilizar algunos de los nuevos recursos que estamos implementando en apuntes.skamasle y aprobecho para animar a todos aquellos que tienen dudas a solicitar nuestro soporte ya que les ayudaremos en todo lo que esté en nuestra mano.

Sin más dejo la demo y el ejemplo para descargar.



Demo OnlineClic para ver Treetable! Archivos EjemploDescargate el ejemplo!


Así nos han encontrado!

  • jquery tablas dinamicas
  • tablas dinamicas php
  • tablas dinamicas en php
  • tablas con jquery
  • tabla dinamica con jquery
  • JQUERY TABLAS EJEMPLOS
  • crear tabla con jquery
  • jquery base de datos
  • tablas dinamicas en php ejemplos
  • tablas en jquery
  • crear tablas con jquery
  • tablas dinamicas con php
  • jquery y base de datos
  • ejemplos jquery 2011
  • jquery tablas
  • base de datos con jquery
  • crear base de datos web con jquery
  • jquery con base de datos
  • crear tabla dinamica jquery
  • ejemplo de tabla dinamica sencilla

11 Responses to Ejemplo: Crear tablas dinamicas con Jquery y Base de Datos

  1. Martha dice:

    Me ayudo mucho el ejemplo, lo adapte a .net con c# basandome en tu ejemplo Gracias

  2. Rafael dice:

    Nax, espectacular el ejemplo, pero tengo una duda, en tu ejemplo solo la primer columna es la que se modifica, es decir es la que tiene la estructura de treeTable, ¿se puede invertir esto y que quede en la segunda columna, y que la primer columna quede todo centrado?

    —————————-
    |Clave | Descripcion |
    —————————-
    | 1 | desc_1 |
    | 12 | desc_12 |
    | 13 | desc_13 |
    | 2 | desc_2 |
    | 21 | desc_21 |
    —————————-

    Saludos,

  3. nax dice:

    hola Rafael!

    pues he estado ocupado estos días así que he tardado en contestarte, mis disculpas.

    Creo que ya habrás encontrado la solución pero si miras el punto 3.3 del manual: http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#example-2

    verás que hay una serie de opciones y una de ellas permite lo que solicitas.

    ejemplo:
    $(“#example3″).treeTable({
    treecolumn: 2
    });

    Recuerda que 0 es la primera…

  4. Daniel dice:

    Hola!

    Quiero saber si es posible al ejemplo que hiciste hacerle un scrollbar horizontar fijando la primera columna. Para meter la información en una tabla más pequeña.
    Saludos.

  5. Nax dice:

    hola daniel, no se si acabo de entenderte.
    Lo que tienes es una tabla muy grande con muchos registros y lo que quieres es que al ir bajando el scrollbar el encabezado vaya desplazandose hacia abajo?

    eso si puede acerse, aunque no lo he probado, si lo he visto en otras webs.

    Si me acuerdo de alguna te pongo el link ya que ahora no recuerdo cual lo hacía :\

  6. Daniel dice:

    Hola Nax!!!

    Tengo una tabla donde uso jquery y treetable, pero es muy grande, quiciera saber si le puedo meter una scrollbar horizontal y vertical, para que la tabla no me quede tan grande. Pero quiero que siga teniendo la estructura de arbol con treetable.

    Espero haberme explicado.

    Gracias

  7. Nax dice:

    Ok.

    Tu problema más bien está relacionado con el contenedor de la tabla y no la tabla en sí.

    Puedes poner un div por encima de la tabla y aplicarle un scroll (ver: http://webintenta.com/Div-con-scroll.html)

    ejemplo

    y aplicar el css que comentan en ese post

  8. eduardo dice:

    hola es posible es escribir en un area de texto nombres y al costado una columna de actividades y al sombrear los nonbres escritos vincularlos a convirtiendolos en link ejemplo pedro quedaria asi despues de sombrear o vincularcon la columna de actividades <a ref "detalle.php?actividad=” pedro

  9. Nax dice:

    posible si que es, solo tienes que programarlo con jquery :)

  10. Gabriel dice:

    Estas tablas son muy buenas te sacan de apuros facil y rapido pero el problema es cuando llegas a un total de 1000 o 2000 o mas registros tarda demasiado en cargar ya que carga todos los registros y ya de ahy hace su chamba bien pero es muy molesto esperarse casi un minuto o dos en lo que carga los 5000 mil registros que tengo en un sistema web eh desarrollado ya mi propia tabla con paginacion php y es mucho mas rapido en mostrar los datos y en consultarlos pero se hace mucho mas trabajo alguien de aqui sabe como se puede hacer algo parecido con alguna jquery no se programar jquery cuando sugerencia es bien recibida gracias

  11. Hello there, just became alert to your blog through Google, and found that it’s really informative. Prayer Request God Boxes http://www.parmamarketbakery.com/node/8#comment-98980

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">