Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Filtrowanie danych w tabeli
Forum PHP.pl > Forum > Przedszkole
peja1990
Witam,
dzisiaj zająłem się stworzeniem tabeli w jQuery i troszkę mi przystawiło na filtrowaniu danych.
Mianowicie chcę aby skrypt działał na podobnej zasadzie jak już gotowy i dosyć znany DataTables, a więc by można było podać więcej jak jedno słowo kluczowe do pola szukania [input=text].
Mój aktualny kodzik działa jak należy, jednak wyszukuje tylko jedno słowo kluczowe, dla przykładu:
Mamy tabelę
  1. ID | Nazwa | Wartość | Data
  2. --------------------------------------------------
  3. 1 | First row | 8367 | 2011-01-02
  4. 2 | Second row | 23745 | 2012-03-21
  5. 3 | Third row | 20152 | 2010-09-16


Wpisuję słowa kluczowe w wyszukiwarce tj.
  1. firs 83 20 01 67 row


I ciągle ma być widoczny tylko pierwszy wynik w tabeli, zo przy moim aktualnym kodzie jest niemożliwe, w jego wyniku przy wprowadzonych takich słowach kluczowych wszystkie wyniki w tabeli są ukryte.

Mój aktualny kod
  1. $("#filteringTable").keyup(filtering);
  2. function filtering() {
  3. $(container).find("table tbody tr").each(function() {
  4. var count = 0;
  5. $(container).find("table tbody tr td").each(function() {
  6. var a = $(this).text();
  7. var b = $("#filteringTable").val();
  8. var rg = new RegExp(b, 'i');
  9. if(a.search(rg) != -1) {
  10. count++;
  11. }
  12. });
  13. if(count > 0) {
  14. $(this).show();
  15. } else {
  16. $(this).hide();
  17. }
  18. });
  19. }


Myślę, że trzeba to zrobić funkcją explode() albo tablicą Array(), lecz nie bardzo wiem jak się do tego zabrać dlatego proszę Was o jakieś wskazówki, za które bardzo będę wdzięczny.

Serdecznie pozdrawiam.
maviozo
Do rozbicia stringu na array (odpowiednik explode) w javascript służy .split(). Używasz np:
Kod
var slowa=$("input").val();
slowa=slowa.split(" ");
Jeżeli wartość to "ab c d", to dostaniesz:
[0]="ab";
[1]="c"
[2]="d".
Potem przy porównywaniu powinieneś każdorazowo porównywać do każdego elementu tablicy.
peja1990
Cytat(maviozo @ 21.03.2012, 15:29:19 ) *
Do rozbicia stringu na array (odpowiednik explode) w javascript służy .split(). Używasz np:
Kod
var slowa=$("input").val();
slowa=slowa.split(" ");
Jeżeli wartość to "ab c d", to dostaniesz:
[0]="ab";
[1]="c"
[2]="d".
Potem przy porównywaniu powinieneś każdorazowo porównywać do każdego elementu tablicy.



No tyle to ja wiem wink.gif
A czy potrafiłbyś mi przedstawić strukturę sprawdzania tablic ?
Bo nie bardzo wiem jak się właśnie do tego zabrać...
Chyba muszę stworzyć tablicę dla każdego wiersza tabeli i tablicę, którą właśnie przedstawiłeś.
No i te dwie tablice porównać w każdym z wierszy...
Dobrze myślę ?
Jeżeli nie to mnie poprawcie a jeżeli tak to potwierdźcie bym wiedział czy idę w dobrym kierunku smile.gif
Niktoś
Może to by pomogło?
http://api.jquery.com/contains-selector/
peja1990
Cytat(Niktoś @ 21.03.2012, 16:10:12 ) *



Dzięki, ale wolę użyć w tym skrypcie funkcji search() bo działa podobnie i jest na pewno bardziej odpowiednia wink.gif
Niktoś
Polecenie search w javascript zwraca ci tylko pozycje wyszukiwanego słowa/wyrazu.Czy rzeczywiście jest lepsze?
[JAVASCRIPT] pobierz, plaintext
  1. $("#tabela tr:contains('John')").css("text-decoration", "underline");
[JAVASCRIPT] pobierz, plaintext
- i podkreśla Tobie wszystkie słowa John w tabeli tabela w każdym wierszu.
peja1990
Cytat(Niktoś @ 21.03.2012, 16:47:13 ) *
Polecenie search w javascript zwraca ci tylko pozycje wyszukiwanego słowa/wyrazu.Czy rzeczywiście jest lepsze?
[JAVASCRIPT] pobierz, plaintext
  1. $("#tabela tr:contains('John')").css("text-decoration", "underline");
[JAVASCRIPT] pobierz, plaintext
- i podkreśla Tobie wszystkie słowa John w tabeli tabela w każdym wierszu.



No nie wiem, ja jakoś tego nie widzę...
Ale jako dodatek na pewno się przyda smile.gif
Niktoś
To był tylko przykład z podkreśleniem można robić dowolne operacje np.
Cytat
if($("#tabela tr:contains('John')"))
{
alert($(this).val());
}
peja1990
Cytat(Niktoś @ 21.03.2012, 17:05:30 ) *
To był tylko przykład z podkreśleniem można robić dowolne operacje np.


Wiem o tym smile.gif
Kombinowałem z tym ale nie bardzo mi to leży...

Aktualnie mam taki kodzik:
  1. $("#filteringTable").keyup(filtering);
  2. function filtering() {
  3. $(container).find("table tbody tr").each(function() {
  4. var results = $(this).text().toLowerCase().replace(' ', '');
  5. var filter = $("#filteringTable").val().toLowerCase().split(' ');
  6. for(var i=0; i<filter.length;i++) {
  7. if(results.search(new RegExp(filter[i], 'i')) != -1) {
  8. $(this).show();
  9. } else {
  10. $(this).hide();
  11. }
  12. }
  13. });
  14. }


Ale to jeszcze nie działa tak jak powinno...
Załóżmy, że wpisuję w inputa plik, a w tabeli mamy wniki jakie jak plik php i nowy folder to ładnie wyświetla tylko wynik plik ale jak dodam do tego spację to już wyświetla obydwa wyniki, a jeżeli do tego jeszcze dopiszę nowy czyli słowa kluczowe to plik nowy to wyświetla tylko wynik nowy folder...


EDIT::
PORADZIŁEM SOBIE exclamation.gif!
Póki co to tylko szkielet więc kod wygląda niezbyt ładnie ale działa dokładnie tak jak chciałem exclamation.gif!
  1. $("#filteringTable").keyup(filtering);
  2. function filtering() {
  3. $(container).find("table tbody tr").each(function() {
  4. var results = $(this).text().toLowerCase().replace(' ', '');
  5. var filter = $("#filteringTable").val().toLowerCase().split(' ');
  6. var x = 0;
  7. for(var i=0; i<filter.length;i++) {
  8. if(results.search(new RegExp(filter[i], 'i')) != -1) {
  9. x++;
  10. }
  11. }
  12. if(x == filter.length) {
  13. $(this).show();
  14. } else {
  15. $(this).hide();
  16. }
  17. });
  18. }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.