Mam parę filtrów (dwa na filtrowanie przez checkboxy i dwa przez textboxy), chcę żeby mi działało w ten sposób, że gdy przefiltruje tabelę przez 1 filtr i użyję następnego, to żeby mi przefiltrowało tylko to co aktualnie wyświetla, a nie całą tabelę.
function filtr_start()
{
var New = document.getElementById("New");
var Accepted = document.getElementById("Accepted");
var Completed = document.getElementById("Completed");
var In_realization = document.getElementById("In_realization");
var Realized = document.getElementById("Realized");
var Sended = document.getElementById("Sended");
var Finished = document.getElementById("Finished");
var Paused = document.getElementById("Paused");
var Canceled = document.getElementById("Canceled");
var Yes = document.getElementById("Yes");
var No = document.getElementById("No");
table = document.getElementById("sortable").rows;
var table_length = table.length;
if(Yes.checked || No.checked || New.checked || Accepted.checked || Completed.checked || In_realization.checked || Realized.checked || Sended.checked ||
Finished.checked || Paused.checked || Canceled.checked)
{
for(var i = 2; i < table_length; i++)
{
if((table[i].cells[4].innerHTML == New.value && New.checked) ||
(table[i].cells[4].innerHTML == Accepted.value && Accepted.checked) ||
(table[i].cells[4].innerHTML == Completed.value && Completed.checked) ||
(table[i].cells[4].innerHTML == In_realization.value && In_realization.checked) ||
(table[i].cells[4].innerHTML == Realized.value && Realized.checked) ||
(table[i].cells[4].innerHTML == Sended.value && Sended.checked) ||
(table[i].cells[4].innerHTML == Finished.value && Finished.checked) ||
(table[i].cells[4].innerHTML == Paused.value && Paused.checked) ||
(table[i].cells[4].innerHTML == Canceled.value && Canceled.checked) ||
(table[i].cells[3].innerHTML == Yes.value && Yes.checked) ||
(table[i].cells[3].innerHTML == No.value && No.checked) )
{
table[i].style.display = "";
}
else
{
table[i].style.display = "none";
}
}
}
else
{
for(var i = 2; i < table_length; i++)
{
table[i].style.display = "";
}
}
}
function filtr_search_danezm (wyrazenie)
{
var tekst = wyrazenie.value.toLowerCase().split(" ");
var table = document.getElementById("sortable");
var element;
for (var r = 2; r < table.rows.length; r++)
{
element= table.rows[r].cells[2].innerHTML.replace(/<[^>]+>/g,"");
var displayStyle = 'none';
for (var k = 0; k < tekst.length; k++)
{
if (element.toLowerCase().indexOf(tekst[k])>=0)
displayStyle = '';
else
{
displayStyle = 'none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
}
function filtr_search_nrzm (wyrazenie)
{
var tekst = wyrazenie.value.toLowerCase().split(" ");
var table = document.getElementById("sortable");
var element;
for (var w = 2; w < table.rows.length; w++)
{
element = table.rows[w].cells[1].innerHTML.replace(/<[^>]+>/g,"");
var displayStyle = 'none';
for (var l = 0; l < tekst.length; l++)
{
if (element.toLowerCase().indexOf(tekst[l])>=0)
displayStyle = '';
else
{
displayStyle = 'none';
break;
}
}
table.rows[w].style.display = displayStyle;
}
}
Tutaj jest tabela w której jest zastosowany ten filtr.
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="src/filtr.js"></script>
</head>
<body>
<?php
/* tutaj jest połączenie z bazą danych */
?>
<table border="1" id="sortable">
<thead>
<tr id="tabh">
<th></th>
<th>Numer zamówienia</th>
<th>Dane zamawiającego</th>
<th>Zapłacone</th>
<th>Status realizacji</th>
<th>Data utworzenia</th>
<th>Blokujący</th>
</tr>
<tr id="tabh_filtr">
<th></th>
<th>
<form>
<input name="filtr" id="textbox" onkeyup="filtr_search_nrzm(this)" type="text">
</form>
</th>
<th>
<form>
<input name="filtr" id="textbox" onkeyup="filtr_search_danezm(this)" type="text">
</form>
</th>
<th>
<button type="button"onClick="filtr_click2()">Filtruj</button>
<div id="filtr_zaplacone">
<p><input type="checkbox" onChange="filtr_start()" id="Yes" value="Tak"/> Tak</p>
<p><input type="checkbox" onChange="filtr_start()" id="No" value="Nie"/> Nie</p>
</div>
</th>
<th>
<button type="button" onClick="filtr_click()">Filtruj</button>
<div id="filtr_status">
<p><input type="checkbox" onChange="filtr_start()" id="New" value="Nowe"/> Nowe</p>
<p><input type="checkbox" onChange="filtr_start()" id="Accepted" value="Zaakceptowane, w trakcie kompletacji"> Zaakceptowane, w trakcie kompletacji</p>
<p><input type="checkbox" onChange="filtr_start()" id="Completed" value="Skompletowane, do realizacji"> Skompletowane, do realizacji</p>
<p><input type="checkbox" onChange="filtr_start()" id="In_realization" value="W trakcie realizacji"> W trakcie realizacji</p>
<p><input type="checkbox" onChange="filtr_start()" id="Realized" value="Zrealizowane, do wysłania"> Zrealizowane, do wysłania</p>
<p><input type="checkbox" onChange="filtr_start()" id="Sended" value="Wysłane"> Wysłane</p>
<p><input type="checkbox" onChange="filtr_start()" id="Finished" value="Zakończone"> Zakończone</p>
<p><input type="checkbox" onChange="filtr_start()" id="Paused" value="Wstrzymane"> Wstrzymane</p>
<p><input type="checkbox" onChange="filtr_start()" id="Canceled" value="Anulowane"> Anulowane</p>
</div>
</th>
<th></th>
<th></th>
</thead>
<tbody>
<?php
while($row = mssql_fetch_assoc($tabela_kody))
{
echo "<tr id=tabb1>
<td><input type=checkbox name=chbox[] value=".$row['NrZamowienia']."</td>
<td>".$row['NrZamowienia']."</td>
<td><br>".$row['Nazwisko']." ".$row['Imie']."<p>".$row['NazwaFirmy']."</td>
<td>".$row['DataZaplaty']."</td>
<td>".$row['StatusRealizacji']."</td>
<td>".$row['DataUtworzenia']."</td>
<td>".$row['Blokujacy']."</td>
</tr>";
} ?>
</tbody>
</table>
</body>
</html>
Chodzi głównie o to żeby te filtry działały razem tak jak w tym przykładzie
http://www.javascriptkit.com/script/script2/tablefilter.shtml