Discussion :

[joker93200]

Bonjour a tous,

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



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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[Showie]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[joker93200]

Bonjour, merci pour ta reponse

mais du coup la fonction selectNb() je dois l'appeler dans mon select non ? avec un évent ?

[Showie]

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.onload = selectNb();

[joker93200]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Showie]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>