Skip to main content

Paginacion y filtrado de tablas con javascript

Hace unas semanas mientras desarrollaba una aplicación web, en la cual necesitaba mostrar tablas ,y por la cantidad de registros tenia que mostrarlos paginados , del lado del servidor usaba CodeIgniter  y aunque este framework tiene un librería para paginas datos , no tiene una para filtrarlos o realizar búsquedas,por eso empecé a buscar una hecha para poder usarla.

Dentro de las que puede encontrar la mejor fue DataTable esta librería además de paginar datos  permite hacer funciones de auto completado para filtrar resultados, ordenamiento,cargado dinámico a través de AJAX entre mas funcionalidades gracias a que tiene una API para que puedas extenderla para lo que se ocurra.

Veremos ahora como usarla con la configuración inicial, lo primero que debemos hacer es abrir nuestro editor de texto preferido y creamos un nuevo archivo con la estructura básica HTML5 .

Después descargargamos Jquery ya que DataTable depende de esta.Tenemos dos  formas de usar Jquery descargandolo a  nuestra computadora o cargándolo remotamente.

Ahora descargamos DataTable, al igual que Jquery podemos descargarlo o mandar a cargar usando el CDN.

Ahora solo nos faltan los datos que queremos paginar para esto copia el siguiente código y ponlo dentro del tag body de nuestro ducumento.

solo falta inicializar el plug in de la siguiente manera , crearemos otro archivo llamado table.js, y dentro de este pondremos lo siguiente.

Nuestro archivo HTML quedaría de la siguiente manera.

Y si abrimos en   nuestro navegador el archivo podras ver algo como esto(click en la imágen para verla en grande).

demo data tableLes dejo el link para que descarguen los archivos.

DESCARGAR ARCHIVOS

Leer Más

Galería de imágenes con Jquery CSS y HTML

En este tutorial les mostrare como crear una galería de imágenes usando Jquery  y html5, para esto usaremos  un plug in de Jquery.

Un plug In de Jquery   no es más que  una función que se agrega el objeto JQuery para poder realizar  efectos o animaciones más fáciles  ya que la mayoría reciben parámetros de configuración, en este caso en específico usaremos el plug In llamado Cycle  que nos permite con unas cuantas líneas de código crear un slider de imágenes con diferentes efectos.

Sin más preámbulo les dejo abajo el video  tutorial de mi canal de YouTube  y los enlaces de descarga del plug in, jquery

 

 

Enlace de jquery:

https://ajax.googleapis.com/ajax-libs/jquery/1.7.2/jquery.min.js

Enlace de Cycle:

http://cloud.github.com/downloads/malsup/cycle/query.cycle.all.latest.js

Enlace de Efectos:

http://www.malsup.com/jquery/cycle/browser.html

Leer Más