Filteren van een tabel met post of ajax?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.NET Developer / Innovatieve software / Virtual Re

Functieomschrijving Als .Net developer werken aan innovatieve software waar onder andere gebruik gemaakt wordt van Virtual Reality? Bijdragen aan een organisatie waar je uitgedaagd wordt om continu verbeteringen en ontwikkelpunten te ontdekken en door te voeren? Werken in de omgeving Putten? Reageer dan nu voor meer informatie! Het pro-actief aandragen van verbeteringen voor de bestaande applicatie; Ontwikkelen van nieuwe functionaliteiten; Doorvoeren van aanpassingen en wijzigingen; Verantwoordelijk voor koppelingen met andere systemen; Op de hoogte blijven van technische ontwikkelingen. Functie-eisen Hbo werk- en denkniveau; Een afgeronde IT gerelateerde opleiding; Minimaal 1 jaar professionele ervaring als developer; Aantoonbare kennis van C#; Initiatiefrijke

Bekijk vacature »

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

20/06/2019 14:10:48
 
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.