Filteren van een tabel met post of ajax?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<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>
<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>
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.
Ik had onderstaande al om ieder geval 2 (eigenlijk 3) filters te kunnen doen. Dus website.nl/test?taal=nederlands&categorie=inkoop&geslacht=nederlands
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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";
}
?>
$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";
}
?>