Filteren van een tabel met post of ajax?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Kees Mulder

Kees Mulder

16/03/2019 15:35:30
Quote Anchor link
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 (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
PHP hulp

PHP hulp

29/03/2024 09:18:05
 
Rob Doemaarwat

Rob Doemaarwat

16/03/2019 16:31:51
Quote Anchor link
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

Thomas van den Heuvel

16/03/2019 17:53:38
Quote Anchor link
Zoals @Rob aangeeft "moet" er niets, het is maar net wat handig/snel/gemakkelijk is.
 
Kees Mulder

Kees Mulder

16/03/2019 23:56:07
Quote Anchor link
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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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

Rob Doemaarwat

17/03/2019 00:29:16
Quote Anchor link
Als het werkt, en je bent er tevreden mee - prima. Lees nog wel eens iets over SQL-injectie.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.