Como en la entrada anterior de Javascrip para crear solapas, para filtrar las filas de una tabla también existen multitud de ejemplos en la Web, incluidos plug-ins de jQuery.
Pero como a mi me gusta experimentar para aprender, aquí está mi versión del filtrado de filas de una tabla. De momento no es plug-in de jQuery pero, como la vez anterior, no creo que sea demasiado difícil adaptarlo. Y, por supuesto que tiene sus fallos, pero se irán subsanando con el tiempo.
function tablefilter(table_selector, input_selector, search_level, colspan) {
var table = $(table_selector);
if(table.length == 0)
return;
var input = $(input_selector);
if(input.length == 0)
return;
if(search_level == "undefined" || search_level < 1)
search_level = 3;
if(colspan == "undefined" || colspan < 0)
colspan = 2;
$(input).val("Buscar…");
$(input).focus(function() {
if($(this).val() == "Buscar…") {
$(this).val("");
}
$(this).select();
});
$(input).blur(function() {
if($(this).val() == "") {
$(this).val("Buscar…");
}
});
$(input).keyup(function() {
if($(this).val().length >= search_level) {
// Ocultamos las filas que no contienen el contenido del edit.
$(table).find("tbody tr").not(":contains(\"" + $(this).val() + "\")").hide();
// Si no hay resultados, lo indicamos.
if($(table).find("tbody tr:visible").length == 0) {
$(table).find("tbody:first").append('<tr id="noresults" class="aligncenter"><td colspan="' + colspan + '">Lo siento pero no hay resultados para la búsqueda indicada.</td></tr>');
}
} else {
// Borramos la fila de que no hay resultados.
$(table).find("tbody tr#noresults").remove();
// Mostramos todas las filas.
$(table).find("tbody tr").show();
}
});
}
Para hacerlo funcionar basta con llamar a la función con dos, tres o cuatro parámetros (a elegir; si no se pasan se usan los predeterminados). El primer parámetro es el selector de la tabla a aplicar; el segundo es el input que se usará para el filtro; el tercero es el número de caracteres mínimos para comenzar la búsqueda (si no se especifica se usan tres); y el cuarto es el número de columnas que se debe extender la fila de información. Un ejemplo de llamada sería:
$(document).ready(function() {
tablefilter("table#mi_tabla", "table thead tr input#filtro", 2, 3);
});
Internamente esta función usa el método contains() de jQuery para buscar. Este método distingue entre mayúsculas y minúsculas, así que, para hacer mejores búsquedas, se puede indicar que este método no distinga de la siguiente forma:
jQuery.expr[':'].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
En caso de que no funcione correctamente, se debe añadir exactamente lo mismo otra vez pero cambiando “.contains =” por “.Contains =“.
Y, cómo no, podéis ver un ejemplo del funcionamiento de la misma así como descargarlo.
Me has ayudado mucho…
Lo del Case Insensitive para el filtro CONTAINS de JQUERY es justo lo que necesitaba….
Mil gracias.
Gracias. Acabo de utilizarlo para un proyecto y le he hecho unas mejoras.
Muchas gracias de nuevo.
Ahora permite filtrado multiple y borrar y recuperar nivel de filtrado anterior.
——
Filtro Multiple
function tablefilter(table_selector, input_selector, search_level, colspan) {
var table = $(table_selector);
if(table.length == 0)
return;
var input = $(input_selector);
if(input.length == 0)
return;
if(search_level == “undefined” || search_level < 1)
search_level = 3;
//search_level = 1;
if(colspan == "undefined" || colspan = search_level) {
ttt = $(this).val().split(/[ ,]+/);
ultimo = ttt.length;
if(event.keyCode ==
{
$(table).find(“tbody tr”).show();
}
for(i=0; i<ultimo; i++){
$(table). find("tbody tr").not(":contains(\"" + ttt[i] + "\")").hide();
}
// $(table).find("tbody tr").filter(":contains('" + ttt[0] + "'):contains('" + ttt[1] + "')").hide(); //css("background-color","yellow");
// Si no hay resultados, lo indicamos.
if($(table).find("tbody tr:visible").length == 0) {
$(table).find("tbody:first").append('Lo siento pero no hay resultados para esta búsqueda’);
}
} else {
// Borramos la fila de que no hay resultados.
$(table).find(“tbody tr#noresults”).remove();
// Mostramos todas las filas.
$(table).find(“tbody tr”).show();
}
});
}
jQuery.expr[':'].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$(document).ready(function() {
tablefilter(“table#mi_tabla”, “table thead tr input#filtrar”, 1, 1);
});
Filtro Triple 2
var ttt = ” “;
Filtrado multiple por cualquier campo
MarcaAncho
AfganistánKabul
AlbaniaTirana
AlemaniaBerlin
AndorraAndorra la Vella
AngolaLuanda
AnguilaThe Valley
Antigua y BarbudaSaint John
Antillas HolandesasWillemstad
Arabia SaudíRiad
ArgeliaArgel
ArgentinaBuenos Aires
ArmeniaErevan
ArubaOranjestad
AustraliaCanberra
AustriaVienna
AzerbaijánBaku
BahreinManama
BangladeshDacca
BarbadosBridgetown
BeliceBelmopan
BenínPorto-Novo
BermudasHamilton
BielorusiaMinsk
BoliviaSucre
Bosnia y HerzegovinaSarajevo
BotswanaGaborone
BrasilBrasília
BruneiBandar Seri Begawan
BulgariaSofia
Burkina FasoOuagadougou
BurundiBujumbura
ButánThimphu
BélgicaBruxelles
CamboyaPhnom Penh
CamerúnYaoundé
CanadáOttawa
Cavo VerdePraia
ChileSantiago
ChinaPekin
ChipreNicosia
ColombiaBogotá
ComoresMoroni
CongoBrazzaville
Corea del NortePyongyang
Corea del SurSeul
Costa RicaSan José
Costa de MarfilYamoussoukro
CroaciaZagreb
CubaLa Habana
DinamarcaCopenhagen
DjiboutiDjibouti
DominicaRoseau
EcuadorQuito
EgiptoCairo
El SalvadorSan Salvador
Emiratos Árabes UnidosAbu Dhabi
EritreaAsmara
EslovaquiaBratislava
EsloveniaLubliano
EspañaMadrid
EstoniaTallin
EtiopíaAddis Abeba
FijiSuva
FilipinasManila
FinlandiaHelsinki
FranciaParís
GabónLibreville
GambiaBanjul
GeorgiaTbilisi
GhanaAccra
GranadaSaint George
GreciaAthens
GroenlandiaNuuk
GuadalupeBasse-Terre
GuatemalaCiudad de Guatemala
GuernseySaint Peter Port
GuineaConakry
Guinea EcuatorialMalabo
Guinea FrancesaCayenne
Guinea-BissauBissau
GuyanaGeorgetown
HaitíPort-au-Prince
HondurasTegucigalpa
Hong KongHong Kong (historical)
HungríaBudapest
IndiaNew Delhi
IndonesiaJacarta
IrakBagdad
IrlandaDublin
IránTeheran
Isla de JerseySaint Helier
Isla de ManDouglas
IslandiaReykjavík
Islas CaimanGeorge Town
Islas ChristmasThe Settlement
Islas CookAvarua
Islas FeroeTórshavn
Islas MalvinasPort Stanley
Islas MarshallMajuro
Islas PitcairnAdamstown
Islas SalomónHoniara
Islas Turcas y CaicosCockburn Town
Islas Vírgenes BritánicasRoad Town
ItaliaRoma
JamaicaKingston
JapónTokio
JordaniaAmman
KazajstánAstana
KeniaNairobi
KiribatiTarawa
KuwaitKuwait
KyrgyzstanBishkek
LaosVientiane
Las BahamasNassau
LesotoMaseru
LiberiaMonrovia
LibiaTripoli
LiechtensteinVaduz
LituaniaVilna
LuxemburgoLuxembourg
LíbanoBeirut
MacaoMacao
MacedoniaSkopje
MadagascarAntananarivo
MalasiaKuala Lumpor
MalawiLilongwe
MaldivasMale
MaltaLa Valette
MalíBamako
MarruecosRabat
MartinicaFort-de-France
MauricioPort Louis
MauritaniaNouakchott
MayotteMamoudzou
MicronesiaPalikir
MoldaviaChi?in?u
MongoliaUlan Bator
MontserratPlymouth
MozambiqueMaputo
Myanmar-BurmaYangon
MéjicoCiudad de México
MónacoMonaco
NamibiaWindhoek
NepalKatmandu
NicaraguaManagua
NigerNiamey
NigeriaAbuja
NiueAlofi
NoruegaOslo
Nueva CaledoniaNouméa
Nueva ZelandaWellington
OmanMascat
PalauKoror
PanamáPanamá
Papúa Nueva GuinéaPort Moresby
PaquistánIslamabad
ParaguayAsunción
Países BajosAmsterdam
PerúLima
Polinesia FrancesaPapeete
PoloniaVarsovie
PortugalLisboa
QatarDoha
Reino UnidoLondon
República CentroafricanaBangui
República ChecaPraga
República Democrática del CongoKinshasa
República DominicanaSanto Domingo
República del ChadNdjemena
ReunionSaint-Denis
RuandaKigali
RumaníaBucarest
RusiaMoscow
Saint Kitts y NevisBasseterre
SamoaApia
San MarinoSan Marino
San Pedro y MiquelónSaint-Pierre
San Vicente y las GranadinasKingstown
Santa HelenaJamestown
Santa LucíaCastries
SenegalDakar
Serbia y MontenegroBelgrado
SeychellesVictoria
Sierra LeonaFreetown
SingapurSingapore
SiriaDamasco
SomaliaMogadiscio
Sri LankaColombo
SuacilandiaMbabane
SudáfricaPretoria
SudánKhartoum
SueciaStockholm
SuizaBerna
SurinamParamaribo
SvalbardLongyearbyen
TailandiaBangkok
TaiwánTaipei
TanzaniaDar es Salaam
TayikistánDushambe
TogoLomé
TongaNuku`alofa
Trinidad y TobagoPort-of-Spain
TurkmenistánAshgabat
TurquíaAnkara
TuvaluFunafuti
TúnezTunez
UcraniaKiev
UgandaKampala
UruguayMontevideo
UzbekistánTashkent
VanuatuPort-Vila
VenezuelaCaracas
VietnamHanoi
YemenSanaa
ZambiaLusaka
ZimbabweHarare
Pruebas <!– iego <beosman@gmail.com> beosman.org –>
——