Tag Archives: JQuery

Filtrar tablas con Jquery – Buscar en tablas con Jquery [uiTableFilter]

Aprende como filtrar datos de una tabla y realizar búsquedas instantáneas utilizando Jquery y su plugin uiTableEdit

Hace mucho tiempo escribí un post sobre tablas dinámicas con jquery, hoy tuve la necesidad de recurrir a otro tipo de plugin jquery para tablas.

No se trata de un plugin para crear bonitas interfaces ni una usabilidad de drag&drop sino que se trata de filtrar datos de una tabla.

O en otras palabras, crear una búsqueda de datos en la tabla.


Así nos han encontrado!

  • filtrar tabla jquery
  • filtrar una tabla mysql
  • jquery filtrar tabla
  • busquedas con jquery
  • uitablefilter
  • tabla jquery
  • buscar en tabla jquery
  • buscar tabla jquery
  • Filtrar tablas con Jquery
  • filtrar tabla con jquery
  • buscar jquery
  • busqueda jquery
  • jquery buscar
  • busquedas jquery
  • buscar con jquery
  • filtrar tablas jquery
  • filtros sobre tablas php y jquery
  • tabla en jquery
  • $ uitablefilter
  • jquery tabla

Como armar una página web

Cuando uno se inicia en la programación web lo primero que se pregunta es: Como armar una página web? que necesito saber? donde puedo subir mi web? etc…
Entonces, empecemos por el principio.

Conocimientos para armar una página web

Antes de plantearnos todas estas dudas requeriremos de los conocimientos.

Así que lo primero y principal es aprender HTML y CSS. Ambos son bastante fáciles de aprender y no requieren de conocimientos previos, como recomendación personal también agregaría XML y XHTML.

Más adelante os daréis cuenta de la importancia de los estándares.
Sabiendo HTML y CSS seremos capaces de armar una página web estática, maquetar, crear plantillas, pasar diseños de photoshop a html.

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;

Así nos han encontrado!

  • jquery tablas dinamicas
  • tablas dinamicas php
  • tablas con jquery
  • tablas dinamicas en php
  • JQUERY TABLAS EJEMPLOS
  • tabla dinamica con jquery
  • 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
  • jquery tablas
  • ejemplos jquery 2011
  • 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

Crear tablas dinámicas con TreeTable, [Plugin JQuery]

Actualización de estilos: 1/2/2012

Mediante este tutorial aprenderemos a crear tablas dinámicas con el plugin de JQuery, TreeTable

TreeTable es un excelentísimo plugin de JQuery que nos permite dar un formato más dinámico y un aspecto mejorado a nuestras tablas.
Permitiendo colapsar tablas, darg & drop y algunas cuantas características más.

un ejemplo visual del treetable básico

El Javascript es tan sencillo como:

$(document).ready(
	function() {
		$("#tree").treeTable();
	}
);

Así nos han encontrado!

  • tablas dinamicas jquery
  • tablas dinamicas con jquery
  • jquery tree table
  • tabla dinámica jquery
  • tablas jquery
  • jquery tabla dinamica
  • treetable jquery
  • jquery treetable
  • tablas dinamicas en jquery
  • tablas editables con jquery
  • tree table jquery
  • jquery table tree
  • tablas dinamicas html
  • tablas dinamicas jquery php
  • jquery tablas editables
  • crear tablas dinamicas jquery
  • tablas dinamicas en html
  • treetable ejemplo
  • arbol dinamico jquery
  • jquery lista dinámica