Redéfinir le nombre de lignes d'une table

Version imprimable

Voir 40 message(s) de cette discussion en une page

1 pièce(s) jointe(s)

Redéfinir le nombre de lignes d'une table

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/

Voir 40 message(s) de cette discussion en une page