Redéfinir le nombre de lignes d'une table

Version imprimable

1 pièce(s) jointe(s)

Bonjour a tous,

mon objectif est de mettre une taille sur mon tableau voici l'image

Pièce jointe 469935

En fait j'aimerais que quand on sectionne un le nombre de lignes à afficher cela s'applique mon problème est que je ne maitrise pas Ajax ni le JavaScript... voici code

Code:

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
<div class="panel monFiltre">
            <div class="panel-heading pull-left">              
                <button class="btn btn-default btn-filtre"><i class="material-icons ">filter_list</i> Filtrer</button>
            </div>  
            <div class="panel-heading pull-right">              
                <select class="custom-select my-1 mr-sm-2" name="afficherNbLigne" id="afficherNbLigne">
                    <option value="">Tous</option>
                    <option value="">10</option>
                    <option value="">20</option>
                    <option value="">30</option>                   
                </select>                                
            </div>          
            <table class="table table-striped" id="tblMembre" style=" width:100%; border:2px solid #00BCD4;">
                <thead>
                    <tr class="filtre">
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Genre" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Nom" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Prenom" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Téléphone" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Email" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Secteur" disabled></span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="row-content">
                    <?php
                        foreach($lesMembres as $unMembre)
                        {
                        $genre = $unMembre['genre'];
                        $nom = $unMembre['nom'];
                        $prenom = $unMembre['prenom'];
                        $tel = $unMembre['tel'];
                        $email = $unMembre['email'];
                        $nomSecteur = $unMembre['nomSecteur'];
                    
                        echo "<tr>
                                <td>$genre</td> 
                                <td style='text-transform: uppercase;'>$nom</td>
                                <td>$prenom</td> 
                                <td>$tel</td>
                                <td>$email</td>
                                <td>$nomSecteur</td>                                
                                </tr>";
                        }
                    ?>
                </tbody>
            </table>
        </div> <!-- fin du panel -->

j'ai besoin de vôtres aides s'il vous plaît merci d'avance !

Salut,

Tu as 2 choix :
soit coté serveur tu calcule le nombre de ligne et tu ajoute l attribut selected="selected"

soit coté javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function selectNb(){ var tab = document.getElementById('tblMembre'); var nb = tab.rows.length - 1; var nbLigne = 0; if (nb<=10) nbLigne = 1; if (nb<=20 && nb>10) nbLigne = 2; if (nb<=30 && nb>20) nbLigne = 3; document.getElementById('afficherNbLigne').selectedIndex=nbLigne; } window.onload = selectNb();
PS : tu as un TR orphelin qui traine après ton tbody

03/05/2019, 14h33
joker93200

Bonjour, merci pour ta reponse

mais du coup la fonction selectNb() je dois l'appeler dans mon select non ? avec un évent ?
03/05/2019, 14h44
Showie

Si tu regarde le bout de code que je t'ai mit.

elle est appelé sur le onload de ta fenêtre.

Code:

window.onload = selectNb();

Je l'ai bien vu mais ça ne me charge pas mon tableau

Code:

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
<table class="table table-striped" id="tblMembre" style=" width:100%; border:2px solid #00BCD4;">
                <thead>
                    <tr class="filtre">
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Genre" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Nom" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Prenom" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Téléphone" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Email" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Secteur" disabled></span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="row-content">
                    <?php
                        foreach($lesMembres as $unMembre)
                        {
                        $genre = $unMembre['genre'];
                        $nom = $unMembre['nom'];
                        $prenom = $unMembre['prenom'];
                        $tel = $unMembre['tel'];
                        $email = $unMembre['email'];
                        $nomSecteur = $unMembre['nomSecteur'];
                    
                        echo "<tr>
                                <td>$genre</td> 
                                <td style='text-transform: uppercase;'>$nom</td>
                                <td>$prenom</td> 
                                <td>$tel</td>
                                <td>$email</td>
                                <td>$nomSecteur</td>                                
                                </tr>";
                        }
                    ?>
                    </tr>
                </tbody>
                <script>
                    function selectNb(){
                    var tab = document.getElementById('tblMembre');
                    var nb = tab.rows.length - 1;
                    var nbLigne = 0;
                    if (nb<=10) nbLigne = 1;
                    if (nb<=20 && nb>10) nbLigne = 2;
                    if (nb<=30 && nb>20) nbLigne = 3;
                    document.getElementById('afficherNbLigne').selectedIndex=nbLigne;
                    }
                    window.onload = selectNb();
                </script>
            </table>

Tu as mis ton bloque de script au mauvais endroit et tu ne l as pas typé.

Code:

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
<table class="table table-striped" id="tblMembre" style=" width:100%; border:2px solid #00BCD4;">
                <thead>
                    <tr class="filtre">
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Genre" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Nom" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Prenom" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Téléphone" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Email" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Secteur" disabled></span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="row-content">
                    <?php
                        foreach($lesMembres as $unMembre)
                        {
                        $genre = $unMembre['genre'];
                        $nom = $unMembre['nom'];
                        $prenom = $unMembre['prenom'];
                        $tel = $unMembre['tel'];
                        $email = $unMembre['email'];
                        $nomSecteur = $unMembre['nomSecteur'];
                    
                        echo "<tr>
                                <td>$genre</td> 
                                <td style='text-transform: uppercase;'>$nom</td>
                                <td>$prenom</td> 
                                <td>$tel</td>
                                <td>$email</td>
                                <td>$nomSecteur</td>                                
                                </tr>";
                        }
                    ?>
                    </tr>
                </tbody>
 
            </table>
<script type="text/javascript">
                    function selectNb(){
                    var tab = document.getElementById('tblMembre');
                    var nb = tab.rows.length - 1;
                    var nbLigne = 0;
                    if (nb<=10) nbLigne = 1;
                    if (nb<=20 && nb>10) nbLigne = 2;
                    if (nb<=30 && nb>20) nbLigne = 3;
                    document.getElementById('afficherNbLigne').selectedIndex=nbLigne;
                    }
                    window.onload = selectNb();
                </script>

Toujours pas...
voila le code complet de la page

Code:

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
<div class="page-header header-filter" data-parallax="true" style="background-image: url('assets/img/bg3.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-md-8 ml-auto mr-auto">
                <div class="brand text-center">
                    <h1>Nos Membres</h1>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="main main-raised">
    <div class="container">
    <div class="table-responsive-xl">
        <div class="panel monFiltre">
            <div class="panel-heading pull-left">              
                <button class="btn btn-default btn-filtre"><i class="material-icons ">filter_list</i> Filtrer</button>
            </div>  
            <div class="panel-heading pull-right">              
                <select class="custom-select my-1 mr-sm-2" name="afficherNbLigne" id="afficherNbLigne">
                    <option value="">Tous</option>
                    <option value="">10</option>
                    <option value="">20</option>
                    <option value="">30</option>                   
                </select>                                
            </div>          
            <table class="table table-striped" id="tblMembre" style=" width:100%; border:2px solid #00BCD4;">
                <thead>
                    <tr class="filtre">
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Genre" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Nom" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Prenom" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Téléphone" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Email" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Secteur" disabled></span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="row-content">
                    <?php
                        foreach($lesMembres as $unMembre)
                        {
                        $genre = $unMembre['genre'];
                        $nom = $unMembre['nom'];
                        $prenom = $unMembre['prenom'];
                        $tel = $unMembre['tel'];
                        $email = $unMembre['email'];
                        $nomSecteur = $unMembre['nomSecteur'];
                    
                        echo "<tr>
                                <td>$genre</td> 
                                <td style='text-transform: uppercase;'>$nom</td>
                                <td>$prenom</td> 
                                <td>$tel</td>
                                <td>$email</td>
                                <td>$nomSecteur</td>                                
                                </tr>";
                        }
                    ?>
                    </tr>
                </tbody>
            </table>
        </div> <!-- fin du panel -->
      </div> <!-- fin du responsive -->
      <script type="text/javascript">
        function selectNb(){
            var tab = document.getElementById('tblMembre');
            var nb = tab.rows.length - 1;
            var nbLigne = 0;
            if (nb<=10) nbLigne = 1;
            if (nb<=20 && nb>10) nbLigne = 2;
            if (nb<=30 && nb>20) nbLigne = 3;
            document.getElementById('afficherNbLigne').selectedIndex=nbLigne;
        }
        window.onload = selectNb();
        </script>
    </div>  <!-- fin du container -->
</div> <!-- fin du corps du site -->

Bon je ne vois pas trop pourquoi mais essaie ceci :

Code:

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
<div class="page-header header-filter" data-parallax="true" style="background-image: url('assets/img/bg3.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-md-8 ml-auto mr-auto">
                <div class="brand text-center">
                    <h1>Nos Membres</h1>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="main main-raised">
    <div class="container">
    <div class="table-responsive-xl">
        <div class="panel monFiltre">
            <div class="panel-heading pull-left">              
                <button class="btn btn-default btn-filtre"><i class="material-icons ">filter_list</i> Filtrer</button>
            </div>  
            <div class="panel-heading pull-right">              
                <select class="custom-select my-1 mr-sm-2" name="afficherNbLigne" id="afficherNbLigne">
                    <option value="">Tous</option>
                    <option value="">10</option>
                    <option value="">20</option>
                    <option value="">30</option>                   
                </select>                                
            </div>          
            <table class="table table-striped" id="tblMembre" style=" width:100%; border:2px solid #00BCD4;">
                <thead>
                    <tr class="filtre">
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Genre" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Nom" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Prenom" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Téléphone" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Email" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Secteur" disabled></span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="row-content">
                    <?php
                        foreach($lesMembres as $unMembre)
                        {
                        $genre = $unMembre['genre'];
                        $nom = $unMembre['nom'];
                        $prenom = $unMembre['prenom'];
                        $tel = $unMembre['tel'];
                        $email = $unMembre['email'];
                        $nomSecteur = $unMembre['nomSecteur'];
                    
                        echo "<tr>
                                <td>$genre</td> 
                                <td style='text-transform: uppercase;'>$nom</td>
                                <td>$prenom</td> 
                                <td>$tel</td>
                                <td>$email</td>
                                <td>$nomSecteur</td>                                
                                </tr>";
                        }
                    ?>
                    </tr>
                </tbody>
            </table>
        </div> <!-- fin du panel -->
      </div> <!-- fin du responsive -->
      <script type="text/javascript">
        function selectNb(){
            var tab = document.getElementById('tblMembre');
            var nb = tab.rows.length - 1;
            var nbLigne = 0;
            if (nb<=10) nbLigne = 1;
            if (nb<=20 && nb>10) nbLigne = 2;
            if (nb<=30 && nb>20) nbLigne = 3;
            document.getElementById('afficherNbLigne').selectedIndex=nbLigne;
        }
        document.addEventListener("DOMContentLoaded", function(event) { 
                   selectNb();
                });
        </script>
    </div>  <!-- fin du container -->
</div> <!-- fin du corps du site -->

03/05/2019, 18h12
joker93200

ça ne marche toujours pas.. mais merci pour ton aide
04/05/2019, 11h34
NoSmoking

Bonjour,
est ce que TOUTES tes données sont chargées ou est ce que tu cherches à faire une « vraie » pagination ?

• PHP pagination
04/05/2019, 13h01
joker93200

Bonjour,

oui toutes les données sont présentes sur la page deja et je veux charger le nombre de ligne a afficher avec mon select

Re Salut,

Bon on est pas au bon endroit pour ça mais si tu veux il existe la solution numéro 1 dont je te parlais :

Code:

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
<div class="page-header header-filter" data-parallax="true" style="background-image: url('assets/img/bg3.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-md-8 ml-auto mr-auto">
                <div class="brand text-center">
                    <h1>Nos Membres</h1>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="main main-raised">
    <div class="container">
    <div class="table-responsive-xl">
        <div class="panel monFiltre">
            <div class="panel-heading pull-left">              
                <button class="btn btn-default btn-filtre"><i class="material-icons ">filter_list</i> Filtrer</button>
            </div>  
            <div class="panel-heading pull-right">              
                <select class="custom-select my-1 mr-sm-2" name="afficherNbLigne" id="afficherNbLigne">
<?php $nb = count($lesMembres); ?> 
                    <option value="all" <?php if (nb>30)echo 'selected="selected"';?>>Tous</option>
                    <option value="10" <?php if (nb<=10)echo 'selected="selected"';?>>10</option>
                    <option value="20" <?php if if (nb<=20 && nb>10)echo 'selected="selected"';?>>20</option>
                    <option value="30" <?php if (nb<=30 && nb>20)echo 'selected="selected"';?>>30</option>                   
                </select>                                
            </div>          
            <table class="table table-striped" id="tblMembre" style=" width:100%; border:2px solid #00BCD4;">
                <thead>
                    <tr class="filtre">
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Genre" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Nom" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Prenom" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Téléphone" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Email" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Secteur" disabled></span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="row-content">
                    <?php
                        foreach($lesMembres as $unMembre)
                        {
                        $genre = $unMembre['genre'];
                        $nom = $unMembre['nom'];
                        $prenom = $unMembre['prenom'];
                        $tel = $unMembre['tel'];
                        $email = $unMembre['email'];
                        $nomSecteur = $unMembre['nomSecteur'];
                    
                        echo "<tr>
                                <td>$genre</td> 
                                <td style='text-transform: uppercase;'>$nom</td>
                                <td>$prenom</td> 
                                <td>$tel</td>
                                <td>$email</td>
                                <td>$nomSecteur</td>                                
                                </tr>";
                        }
                    ?>
                    </tr>
                </tbody>
            </table>
        </div> <!-- fin du panel -->
      </div> <!-- fin du responsive -->
    </div>  <!-- fin du container -->
</div> <!-- fin du corps du site -->

06/05/2019, 10h29
joker93200

1 pièce(s) jointe(s)

Bonjour !

j'ai essayé et ça me donne ça comme erreur

Pièce jointe 472431

Désolé, un copier coller un peu rapide :

Code:

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
<div class="page-header header-filter" data-parallax="true" style="background-image: url('assets/img/bg3.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-md-8 ml-auto mr-auto">
                <div class="brand text-center">
                    <h1>Nos Membres</h1>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="main main-raised">
    <div class="container">
    <div class="table-responsive-xl">
        <div class="panel monFiltre">
            <div class="panel-heading pull-left">              
                <button class="btn btn-default btn-filtre"><i class="material-icons ">filter_list</i> Filtrer</button>
            </div>  
            <div class="panel-heading pull-right">              
                <select class="custom-select my-1 mr-sm-2" name="afficherNbLigne" id="afficherNbLigne">
<?php $nb = count($lesMembres); ?> 
                    <option value="all" <?php if ($nb>30)echo 'selected="selected"';?>>Tous</option>
                    <option value="10" <?php if ($nb<=10)echo 'selected="selected"';?>>10</option>
                    <option value="20" <?php if if ($nb<=20 && $nb>10)echo 'selected="selected"';?>>20</option>
                    <option value="30" <?php if ($nb<=30 && $nb>20)echo 'selected="selected"';?>>30</option>                   
                </select>                                
            </div>          
            <table class="table table-striped" id="tblMembre" style=" width:100%; border:2px solid #00BCD4;">
                <thead>
                    <tr class="filtre">
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Genre" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Nom" disabled></span></th> 
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Prenom" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Téléphone" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Email" disabled></span></th>
                        <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Secteur" disabled></span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="row-content">
                    <?php
                        foreach($lesMembres as $unMembre)
                        {
                        $genre = $unMembre['genre'];
                        $nom = $unMembre['nom'];
                        $prenom = $unMembre['prenom'];
                        $tel = $unMembre['tel'];
                        $email = $unMembre['email'];
                        $nomSecteur = $unMembre['nomSecteur'];
                    
                        echo "<tr>
                                <td>$genre</td> 
                                <td style='text-transform: uppercase;'>$nom</td>
                                <td>$prenom</td> 
                                <td>$tel</td>
                                <td>$email</td>
                                <td>$nomSecteur</td>                                
                                </tr>";
                        }
                    ?>
                    </tr>
                </tbody>
            </table>
        </div> <!-- fin du panel -->
      </div> <!-- fin du responsive -->
    </div>  <!-- fin du container -->
</div> <!-- fin du corps du site -->

06/05/2019, 13h33
joker93200

c'est pas grave, cette fois l’erreur ne s'affiche plus mais pas de changement dans mon tableau. Toutes les données s'affichent peu import la valeur que je choisi (tout, 10, 20 etc)
06/05/2019, 13h54
Showie

Ah ok, je n'y étais pas du tout.
Tu veux une pagination ou tronquer ton tableau ?
06/05/2019, 13h57
joker93200

Euuuu je veux afficher le nombre de ligne selon le choix dans mon select
06/05/2019, 15h17
Showie

Bon vu que tu n'as aucune exigence je te propose une solution avec un peu de css

je t ai fait un jsFiddle pour que tu la vois en fonctionnement :

https://jsfiddle.net/u86bz9og/2/

ça te convient ?
07/05/2019, 10h49
joker93200

1 pièce(s) jointe(s)

Bonjour, désolé de pas avoir répondu plutôt
merci beaucoup, ça marche maintenant juste que toutes les données s'affichent dans la colonne "genre" c'est a cause de la classe "aff_all"

Pièce jointe 472695

comme dans votre code https://jsfiddle.net/u86bz9og/2/
07/05/2019, 11h39
Showie

oui, désolé.
J'ai mis la mauvaise propriété dans le display.

il faut utilise table-row plutôt que block
Exemple : https://jsfiddle.net/8qewL1kn/1/
07/05/2019, 12h46
joker93200

c'est génial merci beaucoup ça marche !
j'ai juste un dernier problème une fois que je filtre par exemple je cherche pas nom apres cela peut import ce que je choisi dans le <select> toute les valeurs restent

https://jsfiddle.net/srjwzvLp/1/

Il faut commencer par corriger le code PHP pour obtenir vraiment ce que tu veux
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <tbody> <tr class="row-content">  <?php foreach($lesMembres as $unMembre) { $genre = $unMembre['genre']; $nom = $unMembre['nom']; $prenom = $unMembre['prenom']; $tel = $unMembre['tel']; $email = $unMembre['email']; $nomSecteur = $unMembre['nomSecteur']; // création pour chaque enregistrement echo "<tr>
La solution CSS avec tr:nth-child n'est pas viable car tu n'a plus accès aux autres enregistrements en visualisation, ce n'est pas x par page mais x tout court.

Il te faut dans ce cas avoir recours à une pagination ou mettre en place une table« scrollable », dans les deux cas cela peut se faire simplement.

Maintenant si tu ajoutes un filtre c'est l'approche qu'il te faut revoir.

IMPORTANT :
Pour pouvoir bien appréhender les solutions possibles il est important d'avoir toutes les contraintes à respecter avant de commencer, une pagination simple ne fonctionnera plus si on ajoute un filtrage !

Combien d'enregistrements comptes tu avoir à l'affichage ?
Il existe des scripts type DataTable qui font très bien le job.

07/05/2019, 16h14
joker93200

Il va y avoir beaucoup d'enregistrement. je vais essayer de faire la même chose je reviens vers vous
merci !
07/05/2019, 19h33
NoSmoking

Juste pour mon information, tu mets en place un filtre global ou un filtre par colonne (apparemment ce serait cette option) ?
08/05/2019, 15h58
joker93200

Bonjour,

c'est un filtre par colonne. Mais après si j'arrive à faire cet exemple https://www.datatables.net/ ça serait génial
09/05/2019, 19h56
NoSmoking

Je te conseille cet exemple : Individual column searching (text inputs) sur DataTables.
09/05/2019, 19h59
joker93200

C'est encore mieux ! je vais essayer comme ça
merci !