js filtrowanie po tabeli

pytanie zadane 27 listopada 2019 w JavaScript przez michal_php Stary wyjadacz (13,700 p.)

Cześć.

Zabieram się za pisanie kodu w js , który będzie filtrować po kolumnach tabeli. Mam kilka pytań otóż :

Jak mogę zrobić filtrowanie po tabli aby po wpisaniu danej frazy np: przefiltruje z liczby 1,2,3 tylko liczbę 2.To aby w budowanie html została tylko sam tag tr z liczbą 2 ?

Tutaj znalazłem boundl w jquery z tą zasadą działania : https://www.jqueryscript.net/demo/Powerful-jQuery-Data-Table-Column-Filter-Plugin-yadcf/

,że po przefiltrowaniu w html jest tylko to co jest widoczne w tabeli. Nie chodzi mi o to aby ukryć tr za pomocą disblay: none Tylko go nie było.

I zastanawiam się jak taki temat ugryźć czy przenieść całą tabele stanu do pamięci chrome czy jakoś inaczej ?

z góry dziękuje za wskazówki.

3 odpowiedzi

odpowiedź 27 listopada 2019 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Po prostu operuj na danych (jakiejś zmiennej data) i korzystaj z funkcji

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

komentarz 27 listopada 2019 przez michal_php Stary wyjadacz (13,700 p.)

Czyli rozumiem ,że np cała tabele przechowywać w zmiennej i do niej się odwoływać podczas filtrowania ?

komentarz 27 listopada 2019 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Nie wiem co rozumiesz przez tabelę. Wizualnie tabeli nie przechowuj, tylko po prostu zbiór danych w zmiennej (docelowo: tablica obiektów). Tą zmienną mapuj na odpowiednie rekordy w tabeli. Jeśli przefiltrujesz, to zmapuj jeszcze raz.

komentarz 27 listopada 2019 przez michal_php Stary wyjadacz (13,700 p.)

A jeszcze mam pytanie o filtrowanie w senie mamy frazę "test" i wpiszemy te to jak możemy zrobić filtrowanie na niepełnej frazie coś na tym przykładzie

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word == 'li');

console.log(result);

komentarz 27 listopada 2019 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Coś takiego chyba:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
 
const result = words.filter(word => word.indexOf('li') > -1);

komentarz 27 listopada 2019 przez michal_php Stary wyjadacz (13,700 p.)

Działa.

 indexOf('li) > -1

Rozumiem ,że to porównuje wszystkie niepełne wartości ? co oznacza -1 ?. I na koniec czyli polecasz bardzie pobrać cała tablice z back-endu i na niej pracować ?

komentarz 27 listopada 2019 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Rozumiem ,że to porównuje wszystkie niepełne wartości ? co oznacza -1 ?

indexOf szuka podany argument w tablicy (string to de facto tablica znaków) i zwraca numer indeksu, gdzie się ten argument zaczyna. Jeśli nie znajdzie, to zwraca -1. A my chcemy żeby znalazło, więc prosimy o większe od > -1. Po więcej zapraszam do dokumentacji.

I na koniec czyli polecasz bardzie pobrać cała tablice z back-endu i na niej pracować ?

Tak, ewentualnie filtrować po stronie backendu (czyli na każdą próbę filtracji pytać backend o nowe dane podając mu żądane filtry). No ale wybór metody zależy od paru czynników. Jak nie ma jakoś niesamowicie dużo danych, to na pewno można po stronie frontendu i ma to parę zalet.

odpowiedź 27 listopada 2019 przez DawidK Nałogowiec (37,910 p.)

Można tworzyć za każdym razem nowy fragment tabeli (body) z odpowiednimi wartościami i kasować to co było wcześniej. Na przykładzie filtrowanie graczy powyżej jakiejś ilości punktów.

1) index.html (z js)

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Table score</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <div>
        <label>select min score</label>
        <input id='input-score' type='number' min='0'> 
        <table class='table'>
            <thead>
                <td>
                    id
                </td>
                <td>
                    name
                </td>
                <td>
                    score
                </td>
            </thead>
            <tbody id='table-body'>

            </tbody>
        </table>
    </div>

    <script>
        
        const playersArray = [
            {
                id: 1,
                name: 'pierwszy',
                score: 120
            },
            {
                id: 2,
                name: 'drugi',
                score: 180
            },
            {
                id: 3,
                name: 'trzeci',
                score: 160
            },
            {
                id: 4,
                name: 'czwarty',
                score: 80
            },
            {
                id: 5,
                name: 'piąty',
                score: 110
            },
            {
                id: 6,
                name: 'szósty',
                score: 150
            }
        ]
        
        const tableBody = document.querySelector('#table-body');
        const inputScore = document.querySelector('#input-score');

        inputScore.addEventListener('change', filtr);

        function filtr() {
            const minScore = document.querySelector('#input-score').value;

            while(tableBody.firstChild){
                tableBody.firstChild.remove();
            }

            for(i=0;i<playersArray.length;i++) {
                if(playersArray[i].score > parseInt(minScore)) {
                    const row = document.createElement('tr');
                    const idCol = document.createElement('td');
                    idCol.innerHTML = playersArray[i].id;
                    const nameCol = document.createElement('td');
                    nameCol.innerHTML = playersArray[i].name;
                    const scoreCol = document.createElement('td');
                    scoreCol.innerHTML = playersArray[i].score;

                    row.appendChild(idCol);
                    row.appendChild(nameCol);
                    row.appendChild(scoreCol);

                    tableBody.appendChild(row);
                }
            }
        }
    </script>
</body>
</html>

2) style.css (dodanie obramowania do tabeli)

table {
    border-collapse: collapse;
  }

table, thead, td {
    border: 1px solid black;
}

odpowiedź 27 listopada 2019 przez obl Maniak (51,280 p.)

Masz dane przechowywane w zmiennej -> filtrujesz je -> na podstawie odfiltrowanych danych generujesz dynamicznie tabelkę. Ot i cała historyja. Jedyne co musisz umieć to operować na drzewie DOM a to podstawy w JavaScript-cie.

komentarz 27 listopada 2019 przez michal_php Stary wyjadacz (13,700 p.)

Teraz już rozumiem.Dziękuje za objaśnienie.

Zastanawiam się tylko czy to ma sens z ponad 800 zmiennymi parametrami.Ponieważ rozważam dwie opcje :

1) to serwer przeszukuje bazę danych tą zmienną , która dostanie od frontu

2) To serwer wypluwa cała swoją zawartość (oczywiście tą , którą powinien pokazać danemu userowi) i tą cała tabele zapisać do localstorage i za każdym razem na początku będzie to od razu pobierane a po czasie będzie dochodzić info z back-endu i niektóre zmienne będą zamieniane. Tylko czy to ma sens ?