jQuery plugin uiTableFilter e piccola modifica

Poco fa stavo usando questa ottima plugin di jquery: uiTableFilter.

Dandogli in pasto una tabella, ed eventualmente il testo dell'header () relativo alla colonna scelta, esegue una ricerca semplicissima tra le righe, nascondendo quelle che non contengono il testo voluto, eseguendo quindi in maniera rapida un filtro.

L'ho trovata molto semplice e dal codice leggibilissimo, per questi motivi ho scelto di utilizzarla.
Però la tabella su cui l'ho applicata è abbastanza complessa, per cui ho messo due input testuali, per filtrare su due colonne differenti. Il problema che si è subito evidenziato è che (giustamente) il filtro su una colonna non considera il filtro sull'altra. Il motivo è semplice: se una riga ha il match con la ricerca che ho effettuato, chiama la funzione show() di jquery, mentre se non contiene il testo cercato chiama una hide(), non avendo quindi modo di capire se la riga era nascosta per un testo cercato precedente oppure per il filtro sull'altra colonna. Ecco quindi come ho risolto:

Ecco il diff con la versione ufficiale

21c21
< jQuery.uiTableFilter = function(jq, phrase, column, ifHidden){
---
> jQuery.uiTableFilter = function(jq, phrase, column, dontUnhide, ifHidden){
28c28
<   var success = function(elem) { elem.show() }
---
>   var success = function(elem) { if(!dontUnhide) elem.show() }

Ho cambiato la signature del metodo aggiungendo un parametro "dontUnhide" che permette di specificare, in pratica se il campo su cui si sta filtrando è primario o meno. Quindi di default (non passando il parametro o dando valore false) si comporta normalmente, quindi è un campo primario. Passando invece il flag impostato a true, si comporta in modo da considerare il campo secondario, non chiamando mai lo show(), ma nasconde comunque le righe che hanno passato il filtro primario ma non passano quello corrente.. il risultato è l'effetto "AND" che mi serviva.. e l'utilizzo che ne faccio è il seguente:

$(document).ready(function() { 
  var theTable = $('table#filtered');
  
  function realFilter() {
    $.uiTableFilter( theTable, $("#filter").val() , 'Site Name');
    $.uiTableFilter( theTable, $("#filterCity").val() , 'City', true);
 }
  $("#filter").keyup(function() {
    realFilter();
  })

  $("#filterCity").keyup(function() {
    realFilter();
  })
}); 

Al caricamento della pagina associo le funzioni alle due caselle di testo, uno per filtrare su Site Name e l'altra su City. Ma in realtà al keyup su qualunque delle due, la funzione è la stessa, che filtra prima sul Site Name, poi sulla City (flag dontUnhide = true).

L'unica cosa che non mi piace tanto è il giro su dontUnhide.. che è macchinoso pensare quando il flag per non "non nascondere" vada impostato a false.. mi sarebbe piaciuto usare un flag tipo "primary", ma in javascript preferisco sempre avere flag booleani il cui valore false causi il comportamento "normale", in modo che siano non obbligatori.

Ho appena scritto al creatore della plugin.. chissà che non possa tornare utile a lui o ad altri..