Często napotykanym problemem przez programistów jest dynamiczne wyszkukiwanie danych w tabeli. Problem ten można łatwo rozwiązać używając funkcji filter() dostępnej w bilbliotece JQuery.

Funkcja filter() w Jquery ograniczna zbiór dopasowanych lementów do tych które odpowiadają selektorowi lub spełniają test funkcji.

Kolorowanie co drugiego elementu listy

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

Za pomocą jquery piszemy kod:

$( "ul li" ).filter( ":even" ).css( "background-color", "red" );

Funkcja dopasuje parzyste elementy i wykona na nich funkcje css(), która zmieni kolor na czerwony. Oczywiście w tym prostym przykładzie wystarczy, że zastosujemy prosty css i efekt dostaniemy taki sam, ale chodzi o pokazanie działania funkcji filter().

Użycie funkcji testującej

Druga forma funkcji filter() pozwala nam na zastosowanie funkcji sprawdzającej. Dla każdego elementu, na którym zostanie wykonana funkcja filter, zostanie przeprowadzony test funkcji, którą piszemy sami.

Przykładowy kod:

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

Możemy filtrować elementy listy na podstawie ich zawartości.

$( "li" )
  .filter(function( index ) {
    return $( "strong", this ).length === 1;
  })
    .css( "background-color", "red" );

Ten kod na każdym elemencie listy(<li>) wykona metodę filter, która posiada funkcje sprawdzającą. Funkcja ta sprawdza czy w danym elemencie listy znajduje się więcej niż jeden tag <strong>. Jeżeli tak jest to wykonana jest funkcja CSS, która zmieni kolor tła elementu na czerwony. Przeczytaj więcej, aby dowiedzieć się o dynamicznym wyszukiwaniu elementów w tabeli. 

Dynamiczne wyszukiwanie elementów w tabeli

Mając już jakieś pojęcie o działaniu funkcji filter() prześledzmy jak można wyszukać dane w tabeli.

Kod html dla tabeli:

<input type="text" id="szukaj_osoby" placeholder="wpisz imię, nazwisko lub zawód">
<table id="tabela">
    <tr>
        <td>imie</td>
        <td>nazwisko</td>
        <td>zawod</td>
    </tr>

    <tr>
        <td>Marian</td>
        <td>Kononowicz</td>
        <td>polityk</td>
    </tr>

    <tr>
        <td>Antek</td>
        <td>Kowal</td>
        <td>programista</td>
    </tr>
     <tr>
        <td>Wiesia</td>
        <td>Komorowska</td>
        <td>programistka</td>
    </tr>
</table>

Jest to zwykła tabela z 3 kolumnami i kilkoma wierszami. Potrzebne nam będzie jeszcze pole, w którym będziemy wpisywać dane do wyszukania w moim przypadku jest to input o id=”szukaj_osoby”.

Następnie potrzebujemy napisać kod JavaScript

var $rows = $('#tabela tr'); //pobranie wierszy z tabeli
$('#szukaj_osoby').keyup(function() { //funkcja keyup jest wywolywana kiedy uzytkownik nacisnie klawisz

	    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
	        reg = RegExp(val, 'i'),
	        text; // uzycie wyrazenia regularnego do sprawdzenia elementu

	    $rows.show().filter(function() { // najpierw pokazujemy wszystkie wiersze, a potem stosujemy funkcje filter()
	        text = $(this).text().replace(/\s+/g, ' ');
	        return !reg.test(text); //sprawdzamy czy wiersz pasuje doelementu szukanego, jeśli nie to chowamy ten wiersz 
	    }).hide();
	});

Gotowy działający przykład dynamicznego wyszukiwania danych w tabeli na JsFiddle