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
Super!
Dzięki bardzo, jednak mam pytanie – jak zrobić, żeby nie znikały mi nagłówki tabel podczas wyszukiwania? (czyli sekcja … )
Dość łatwo wystarczy lekko zmienić strukturę tabeli i dodać
i pobrać wiersze do wyszukiwania z tbody czyli$rows = $('#tabela tbody tr');
można to również zrobić „olewając” pierwszy wiersz z tabeli
$rows = $('#tabela tbody tr'):not(':first');
Dzięki za skrypt!
Małe pytanie tylko mam. Umieściłem skrypt do tabeli szkoleń na stronie niby wszystko działa bardzo dobrze ale jest problem z filtrowaniem miasta ŁÓDŹ. Inne polskie znaki działają poprawnie, może masz jakiś pomysł?
zobacz na http://stackoverflow.com/questions/280712/javascript-unicode-regexes
Bardzo wszystko fajne, ale ja chciałbym zapytać jak w tego typu tabelach pobrać informacje z bazy danych SQL lub plików json?
Pracuje właśnie nad stworzeniem dynamicznej tabeli i mam wyżej wymieniony problem.
Próbowałem też skorzystać z tej strony: http://www.gyrocode.com/articles/jquery-datatables-checkboxes/
by uzyskać tego typu tabelę do swojego projektu, lecz kiedy chce skorzystać ze swojego pliku json nagle wywala mi problemy z JQuery jak i z „var table = $(’#example’).DataTable({…”. Czy mógłby ktoś rozświetlić ten problem?
Jeśli potrzebujesz kontaktu z backendem to użyj AJAX-a, pobierz dane w formie JSON i zrób append do tabeli w formie HTML lub lepiej poprzez createElement()
Fantastyczny skrypt. Bardzo przydatny przy dużej ilości danych w html, bez konieczności użycia php.
Mam pytanie. Czy dałoby tak zmodyfikować skrypt, aby wpisywane/szukane słowo zostało zakreślone na wybrany kolor w tabeli?
Pozdrawiam.
Tak. Gdy słowo zostanie znalezione można opakować je w z odpowiednią klasą ustawiającą kolor w funkcji filter np.
Witam, w jaki sposób użyć tego w zwykłym html? Dopiero raczkuję w tym więc nie bardzo wiem. Do pliku dodałem linijkę a skrypt zapisałem notatnikiem do pliku .js. Jednak filtrowanie nie działa… Proszę o pomoc.
zobacz sobie na fiddle, które dołączyłęm http://jsfiddle.net/jtV7q/?utm_source=website&utm_medium=embed&utm_campaign=jtV7q tam rozpisane jest gdzie co dać. Ogólnie część JS-owa powinan być w tagach
Jak zrobić, aby filtrowało tą tabelę według dwóch danych tj.
Dodać drugi input, a wynik musi spełnić oba warunki z dwóch inputów?
zdarzenie na keyup musi wtedy brać informacje z dwóch input field i łączyć je w jedno, w zależności jak chcesz to zrobić.
W jaki sposób wybrać konkretną kolumnę żeby tylko w niej wyszukiwało? Próbowałem skorygować w linii var $rows = $(’#tabela tbody tr #szukane’); dodając jednocześnie do każdego . Wynik był taki, że wyszukiwało tylko w wybranej kolumnie i to jest ok, ale nie ukrywało wcale wierszy tylko zostawiało je bez danych tylko w tej konkretnej kolumnie.
No i ta sprawa słów zaczynających się od polskich liter – nie wyszukuje ich. Jeśli polska litera jest druga lub dalej, to wyszukuje taki wyraz poprawnie.
Hej Krzysiek, nie możesz dodać id=”szukane” gdyż element ID musi być unikalny na całej stronie. Można odnieść się do elementu poprzez jego pozycje np wziąć children i [3] wtedy jest to 4 kolumna, albo poprzez nadanie klasy poprzez class=”searchable”. Jeśli chodzi o polskie znaki to odpisywałem wyżej, że to kwestia regex-a i szukania po znakach z UTF-8.
Ale podany przeze mnie sposób działa. Zauważyłem to już wcześniej, że nadając to samo id wielu elementom i później określając ich styl w CSS to taki styl dotyczy każdego elementu.
Mowa oczywiście o sposobie, który podałem niżej.
Żeby szukać tylko w jednej kolumnie trzeba nadać id (np id=’szukane’) wszystkim komórkom tej kolumny lub klasę
var $rows = $(’#tabela tbody tr #szukane’);
następnie dodajemy fragment pokazujący ukryte wiersze i na końcu, przed hide() wpisujemy parent(„tr”), aby ukryć wiersze, w których nie występują pasujące wyrażenia:
$(„tr:hidden”).show();
$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ’ ’);
return !reg.test(text);
}).parent(„tr”).hide();
Jednak nadal nie wiem jak zmusić skrypt do wyszukiwania jeśli pierwsza litera to polski znak lub cyfra.
jeśli chodzi o problem z UTF-8 https://stackoverflow.com/questions/280712/javascript-unicode-regexes,
Poddaję się. Próbowałem na różne sposoby, ale chyba za słabo mi idzie. Rozumiem każdą linię skryptu. Na początek chciałem rozwiązać problem cyfry na początku stringa, ale ostatecznie nie doszedłem do tego gdzie poprawić pattern. var val = '^(?=.*\\b’ + $.trim($(this).val()).split(/\s+/).join(’\\b)(?=.*\\b’) + ’).*$’,
Jak zrobic by wyszukiwanie bralo od uwage tylko pelne zdanie? Np: wpisujac „P” nie znajdzie nic a wpisujac „Programista” znajdzie programistow?
Trochę ciężko, bo czym jest „zdanie” albo „słowo” coś co ma 2 litery jest już słowem czy nie? Wszystko zależy od Twoich warunków, ale ogólnie można zrobić wyszukiwanie dopiero gdy długość tekstu jest większa niż jakaś założona przez Ciebie.