JavaScript: istovremeno filtriranje tri kolone tabele preko select lista

[Pr0j3kt0r1ja]

Zdravo svima,

Pravimo neku bazu za projekte naše istraživačke laboratorije.
Bazu pokreću PODs pod Wordpress-om, a sem izlistavanja svih projekata, potrebno je omogućiti filtraciju po tri osnova:
trajanje: aktuelan (1), završen (2)
kategorija: domaći (3), međunarodni (4), kolabloracija (5)
status: nosilac (6), partner (7)

Elem, tabela ima veći broj kolona, a pomenute tri su ključne. Potrebno je da posetilac može u filterima da podesi izlistavanje samo onih projekata koji imaju dato svojstvo. Npr: aktuelan - domaći - nosilac i tome slično. Ono što sam uradila, pomoću nekog koda sa neta, jeste to da sam uspela da osposobim funkciju filtriranja po samo jednom kriterijumu, ali ne i sva tri. Dakle, mogu izabrati jedan i taj će biti prikazan, ako pokušam da ih kombinujem, prikazaće se samo oni po poslednjem selektovanom kriterijumu. Takođe, ako izaberem neku opciju, pa vratim na prikaži sve, to ne radi, tj. brišu se svi projekti, umesto da prikaže sve.

Da li postoji neki elegantan način da se ovo reši JS kako smo zamislili. Hvala!

<h5>Trajanje projekta</h5>
  <select id="trajanje" onchange="colTrajanje()">
    <option value=""></option>
    <option value="1">Aktuelan</option>
    <option value="2">Završen</option>
  </select>
 
<h5>Kategorija projekta</h5>
  <select id="kategorija" onchange="colKategorija()">
    <option value=""></option>
    <option value="3">Domaći</option>
    <option value="4">Međunarodni</option>
    <option value="5">Kolaboracija</option>
  </select>

<h5>Status laboratorije</h5>
    <select id="status" onchange="colStatus()">
    <option value=""></option>
    <option value="6">Nosilac</option>
    <option value="7">Partner</option>
  </select>

<script>

function colTrajanje() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("trajanje");
  filter = input.value.toUpperCase();
  table = document.getElementById("projekti");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[5];
    if (td) {
      if (td.innerHTML.toUpperCase() === filter) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

function colKategorija() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("kategorija");
  filter = input.value.toUpperCase();
  table = document.getElementById("projekti");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[6];
    if (td) {
      if (td.innerHTML.toUpperCase() === filter) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

function colStatus() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("status");
  filter = input.value.toUpperCase();
  table = document.getElementById("projekti");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[7];
    if (td) {
      if (td.innerHTML.toUpperCase() === filter) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

</script>

 

[parser]

3u1

function colTrajanjeKategorijaStatus() {
  var inputTrajanje, inputKategorija, inputStatus, filterTrajanje, filterKategorija, filterStatus, table, tr, tdTrajanje, tdKategorija, tdStatus, i;
  inputTrajanje = document.getElementById("trajanje");
  inputKategorija = document.getElementById("kategorija");
  inputStatus = document.getElementById("status");
  filterTrajanje = inputTrajanje.value.toUpperCase();
  filterKategorija = inputKategorija.value.toUpperCase();
  filterStatus = inputStatus.value.toUpperCase();
  table = document.getElementById("projekti");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    tdTrajanje = tr[i].getElementsByTagName("td")[5];
    tdKategorija = tr[i].getElementsByTagName("td")[6];
    tdStatus = tr[i].getElementsByTagName("td")[7];
    if (tdTrajanje && tdKategorija && tdStatus) {
      if (tdTrajanje.innerHTML.toUpperCase() === filterTrajanje && tdKategorija.innerHTML.toUpperCase() === filterKategorija && tdStatus.innerHTML.toUpperCase() === filterStatus) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

 

[Pr0j3kt0r1ja]

Veliko hvala, blizu smo rešenja!

Ostaje samo još jedan problem, a to je što taj prvi izbor u selekt listi (Prikaži sve) nije funkcionalan. Recimo kad neko izabere Završene projekte, pa hoće da se vrati na Prikaži sve, tu nema ničega, ne selektuje nijedan red za prikaz, tj. svima ostavi none klasu u html-u. Ovo za posledicu npr. ima to da ovaj kod radi samo ako su sva tri select filtera sukcesivno podešena i onda se lepo prikaže šta treba, ali ako neki nisu nego su na modu Prikaži sve (value je tu prazno), onda se ne prikazuje ništa.

 

[parser]

        colTrajanjeKategorijaStatus = () => {
            const filterTrajanje = document.getElementById("trajanje").value;
            const filterKategorija = document.getElementById("kategorija").value;
            const filterStatus = document.getElementById("status").value;
            const tr = document.getElementById("projekti").getElementsByTagName("tr");
            for (let i = 0; i < tr.length; i++) {
                let tdTrajanje = tr[i].getElementsByTagName("td")[5].textContent;
                let tdKategorija = tr[i].getElementsByTagName("td")[6].textContent;
                let tdStatus = tr[i].getElementsByTagName("td")[7].textContent;
                if ((tdTrajanje === filterTrajanje || !filterTrajanje) && (tdKategorija === filterKategorija || !filterKategorija) && (tdStatus === filterStatus || !filterStatus)) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }

 

[Pr0j3kt0r1ja]

Ovo sada savršeno funkcioniše. Najlepše hvala na pomoći!