Artículos por: Carlos Alberto Castaño García




Plugin jQuery que permite filtrar datos por columnas en una tabla por medio de atributos HTML o JavaScript.
Plugin probado con jQuery 1.8.3


Para el correcto funcionamiento de este plugin las tablas HTML deben ser creadas respetando las etiquetas <thead> y <th> para las columnas y <tbody> para los datos.


Contenido:


Instalación


Para instalar este plugin solo basta con descargar este script desde el repositorio en GitHub e incluirlo en el <head> de la siguiente forma:

<script src="fcjs.js" type="text/javascript" charset="utf-8"></script>

Asumiendo que el script se encuentra en el mismo directorio del archivo html.

Está de más decir que se debe incluir jQuery antes del script.
También se puede ver el contenido del script y seguir sus actualizaciones en GitHub: fc.JS

Volver al contenido


Opciones


Con las siguientes opciones puede configurar el plugin para adaptarlo a sus necesidades, a continuación las opciones disponibles con sus valores por defecto:

Opción

Descripción

Posibles valores

Valor por defecto

inputFilter

Indica las columnas que permitirán el filtro

  • all - para indicar todas las columnas

  • texto en el encabezado de la columna para indicar una columna específica

all

inputType

Especifica el tipo de input con el que se realizará la búsqueda

algunos requieren HTML5

  • text - para ingreso de texto

  • color - para ingreso de un color

  • date - para el ingreso de fechas

  • time - para el ingreso de horas

  • number - para el ingreso de números

  • range - para el ingreso de valores por un slider

  • search - para el ingreso de texto

text

inputEvent

Especifica el tipo de evento que se generará en el inputFilter

revisar la documentación sobre eventos en jQuery

  • change

  • keyup

  • keydown

  • keypress

  • focusin

  • focusout

keyup

inputCase

Especifica si la búsqueda se hará teniendo en cuenta las mayúsculas y minúsculas

  • true - Se diferencia entre mayúsculas y minúsculas

  • false - No se diferencia entre mayúsculas y minúsculas

false

inputNewLine

Indica si el input va en una nueva línea del encabezado

  • true - En una nueva línea

  • false - En la mísma línea del titulo

false

inputClass

Permite asignar una clase CSS al input

  • class="..."

(vacío)

inputStyle

Permite asignar estilos CSS directamente al input

  • style="..."

(vacío)

efect

Permite indicar si el filtrado se hará con efectos o no.

  • true - con efectos

  • false - sin efectos

true

efectType

Permite indicar el tipo de efecto que se realizará al filtrar

  • fast - aparición rápida

  • slow - aparición lenta

fast

Volver al contenido



Usar con atributos HTML


La forma más sencilla de utilizar el plugin es con atributos data-x en la etiqueta <table>.
De esta forma configuraremos a las opciones del plugin sin necesidad de escribir código JavaScript adicional.

Si va a utilizar este método el único atributo obligatorio es data-filter="true", con este es más que suficiente para que adicionen inputs en cada columna de la tabla.

<table data-filter="true" >
    ...
</table>


Adicionalmente existe la posibilidad de agregar los atributos mencionados en la sección opciones para personalizar el plugin, a la izquierda un ejemplo de como usar algunos de ellos y a la derecha como se vería la tabla:

<table data-filter="true"
       data-inputFilter="all"
       data-inputCase="true"
       data-inputClass="input-small" >
    	<thead>
    	    ...
        </thead>
</table>

Col1 Col2 Col3
Dato1 Dato2 Dato3
Dato4 Dato5 Dato6
Dato7 Dato8 Dato9


Tenga en cuenta que la clase "input-small" es un estilo CSS que está definido en mi sitio web y no hace parte del plugin.


Volver al contenido



Usar con JavaScript


Para usar con JavaScript no es necesario adicionar ningún atributo a la tabla, simlemente ejecutando las siguientes instrucciónes se generarían los filtros.

// Con las opciones por defecto del plugin
$('#tabla1').fcJS();

// Personalizando las opciones del plugin
$('#tabla1').fcJS({
	inputEvent : 'change',
	inputType  : 'date'
	...
});

Volver al contenido


¡Cualquier sugerencia es bienvenida!.