Filteren van een tabel met post of ajax?

Door Kees Mulder op 16-03-2019 15:35

2.108 views

Ik heb onderstaande script en wil eigenlijk de tabel filteren. Nu heb ik dat middels een href link of moet ik dit met een post (ajax) doen.

[code]
<section id="head">
<div class="container">
<div class="row">
<div class="col-md-12">

<h1>Lijst met medewerkers</h1>

</div>
</div>
<div class="row">
<div class="col-md-4">

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categorie
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>?categorie=management">Management</a>
<a class="dropdown-item" href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>?categorie=verkoop">Verkoop</a>
<a class="dropdown-item" href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>?categorie=inkoop">Inkoop</a>
<a class="dropdown-item" href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>?categorie=marketing">Marketing</a>
<a class="dropdown-item" href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>?categorie=communicatie">Communicatie</a>
</div>
</div>

</div>
<div class="col-md-4">

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Taal
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>?taal=engels">Engels</a>
<a class="dropdown-item" href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>?taal=frans">Frans</a>
<a class="dropdown-item" href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>?taal=duits">Duits</a>
<a class="dropdown-item" href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>?taal=nederlands">Nederlands</a>
</div>
</div>

</div>
<div class="col-md-4">

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Geslacht
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>?geslacht=man">Man</a>
<a class="dropdown-item" href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>?geslacht=vrouw">Vrouw</a>
</div>
</div>

</div>

</div>
</div>
</div>
</section>

<section id="resultaat">
<div class="container">
<div class="row">
<div class="col-md-12">

<h2>Overzicht resultaat</h2>

</div>
</div>
<div class="row">
<div class="col-md-12">

<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Medewerker</th>
<th>Woonplaats</th>
</tr>
</thead>
<tbody>

<?php

$sql = "SELECT * FROM medewerkers LEFT JOIN medewerkers_talen ON medewerkers_talen.mw_medewerkers_id = medewerkers.medewerkers_id LEFT JOIN medewerkers_geslacht ON mg_medewerkers_id = medewerkers.medewerkers_id GROUP BY medewerkers_id ORDER BY mw_naam ASC";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {

echo "<tr>";
echo "<td>" . $row["medewerkers_id"]. "</td>";
echo "<td>" . $row["mw_naam"]. "</td>";
echo "<td>" . $row["mw_woonplaats"]. "</td>";
echo "</tr>";
}
} else {
echo "0 results";
}
?>
</tbody>
</table>

</div>
</div>
</div>
</section>
[code]

Rob Doemaarwat

16-03-2019 16:31

Als het blijkbaar geen enkel probleem is om de hele tabel in 1x uit te serveren (lees: niet zo heel veel records), dan zou ik het gewoon client-side doen - met een stukje Javascript dus. Daar zijn 1001 (kant en klare) oplossingen voor, maar je kunt ook heel simpel zelf iets maken. Geef iedere <tr> bijvoorbeeld een class "geslacht-man" of "geslacht-vrouw" mee, en als iemand dan alleen de vrouwen wil zien verberg je alle tr.geslacht-man (en dito voor de andere filter opties).

Als het zou kunnen dat de hoeveelheid data in de toekomst te groot wordt, dan moet je aan de server zijde gaan filteren/beperken (bijvoorbeeld maximaal 100 records tonen, volgens de huidige filter wens). Voor de overige records ga je dan pagineren (ook 1001 tutorials voor) of on-demand bij laden (via een knop "Toon meer records" onderaan, of via het onscroll event kijken of de gebruiker bijna onderaan is). Het filteren zou ik dan via ajax doen, dat geeft een betere gebruikerservaring. Als je de pagina moet verversen om de filtering te tonen gaat de gebruiker misschien tijdens het laden al weer andere filters aanklikken, of scrollen, en dat is dan allemaal weer "weg" als de pagina uiteindelijk geladen is.

Andersom is het ook altijd wel weer leuk als je de filtering (ook) via de URL door kunt geven (dus via de query/GET), dan kun je een gefilterde tabel bookmarken of doorsturen. Het één sluit het ander niet uit: via window.history.pushState (javascript) kun je de URL aanpassen zonder dat je de pagina herlaad.

Die PHP_SELF is overigens niet echt nodig. Als je gewoon href="?key=value" doet plakt de browser zelf al de huidige pagina d'r voor.

Thomas van den Heuvel

16-03-2019 17:53

Zoals @Rob aangeeft "moet" er niets, het is maar net wat handig/snel/gemakkelijk is.

Kees Mulder

16-03-2019 23:56

Oke dus dan met AJAX zal ik verder gaan. Maar had ergens gelezen dat bij google daar niet zo blij mee is voor de resultaten?

Ik had onderstaande al om ieder geval 2 (eigenlijk 3) filters te kunnen doen. Dus website.nl/test?taal=nederlands&categorie=inkoop&geslacht=nederlands


<?php
				
				$taal = $_GET['taal'];
				$geslacht = $_GET['geslacht'];
				$categorie = $_GET['categorie'];
				
				$sql = "SELECT * FROM medewerkers 
				LEFT JOIN medewerkers_categorie ON medewerkers_categorie.mc_medewerkers_id = medewerkers.medewerkers_id
				LEFT JOIN categorie ON categorie.categorie_id = medewerkers_categorie.mc_categorie_id
				LEFT JOIN medewerkers_talen ON medewerkers_talen.mw_medewerkers_id = medewerkers.medewerkers_id
				LEFT JOIN talen ON talen.talen_id = medewerkers_talen.mw_talen_id			
				WHERE categorie.categorie_slug = '" .$categorie. "' AND talen.talen_slug = '" .$taal. "'
				GROUP BY medewerkers.medewerkers_id ORDER BY mw_naam ASC";
				$result = $conn->query($sql);
				
				if ($result->num_rows > 0) {
					// output data of each row
					while($row = $result->fetch_assoc()) {
						
						echo "<tr>";
						echo "<td>" . $row["medewerkers_id"]. "</td>";
						echo "<td>" . $row["mw_naam"]. "</td>";
						echo "<td>" . $row["mw_woonplaats"]. "</td>";
						echo "</tr>";
					}
				} else {
					echo "0 results";
				}
				?>

Rob Doemaarwat

17-03-2019 00:29

Als het werkt, en je bent er tevreden mee - prima. Lees nog wel eens iets over SQL-injectie.

Reageren

Inloggen om te reageren