Tableau cocher des checkbox et filtre

**cirvent** · 07/01/2019, 11h58

Bonjour,

J'ai un probleme de javascript et je n'arrive pas à le corrige par manque de connaissance, j'ai le tableau suivant avec scripts un pour faire un recherche sur la colonne Name et l'autre pour sélectionner tout les lignes, le probleme et que lorsque je filtre et que je coche pour tous sélectionner, il me sélectionne les lignes caché se que je ne veux pas.

Nom : bug.PNG
Affichages : 1285
Taille : 17,7 Ko

Nom : bug.PNG
Affichages : 1285
Taille : 17,7 Ko

Code PHP :

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
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
echo "<table id=\"myTable2\" class=\"table table-bordered table-hover\">
	<thead>
	<tr>
		<th width=\"50\"><input type=\"checkbox\" id=\"master2\"></th>
		<th width=\"210\"><button type=\"submit\" class=\"btn-xs btn-primary pull-left delete_all2\">Supprimer la sélection</button></th>
		<th class=\"NAME\"><input type=\"text\" id=\"myInput2\" onkeyup=\"myFunction2()\" placeholder=\"Name\"></th>
		<th class=\"TYPE\">Type</th>
		<th class=\"FOURNISSEUR\">Fournisseur</th>
		<th class=\"STATUS\">Status</th>
		<th class=\"OWNERS\">Owners</th>
		<th class=\"BUY_BY\">Acheteur</th>
	</tr>
	</thead>";
	if($count_pending != '0'){
		while($data2 = $query_pending->fetch())
		{
			echo "<TR data-row-id2=\"".$data2['ID']."\">
				<td><input type=\"checkbox\" class=\"sub_chk2\" data-id2=\"".$data2['ID']."\">  <a class=\"delete_certificats\" data-id=\"".$data2['ID']."\" href=\"javascript:void(0)\"><i class=\"glyphicon glyphicon-trash\"></i></a></td>
				<td>
					<select name=\"action\" onchange=\"location = this.value;\">
						<option>Sélectionner une action ...</option>
						<option value=\"index.php?module=certificats&action=finalized&id=".$data2['ID']."\">Finalser</option>
						<option value=\"index.php?module=certificats&action=show&id=".$data2['ID']."\">Visualiser</option>
						<option value=\"index.php?module=certificats&action=edit&id=".$data2['ID']."\">Editer</option>
						<option value=\"index.php?module=certificats&action=upload&id=".$data2['ID']."\">Uploader un fichier</option>";
						if($data2['CSR_FILE'] != NULL){
							echo "<option value=\"kernel/download.php?type=1&id=".$data2['ID']."&token=".$_SESSION['token_download']."\">Télécharger le CSR</option>";
						}
						if($data2['PRIVATE_KEY_FILE'] != NULL){
							echo "<option value=\"kernel/download.php?type=2&id=".$data2['ID']."&token=".$_SESSION['token_download']."\">Télécharger la clé privée</option>";
						}
						if($data2['CRT_FILE'] != NULL){
							echo "<option value=\"kernel/download.php?type=3&id=".$data2['ID']."&token=".$_SESSION['token_download']."\">Télécharger le certificat</option>";
						}
					echo "</select>
				</td>
				<TD class=\"NAME\">".$data2['NAME']."</TD>
				<TD class=\"TYPE\">".$data2['TYPE']."</TD>
				<TD class=\"FOURNISSEUR\">".$data2['RAISON_SOCIAL']."</TD>
				<TD class=\"STATUS\">".$data2['STATUS']."</TD>
				<TD class=\"OWNERS\">".$data2['OWNERS']."</TD>
				<TD class=\"BUY_BY\">".$data2['BUY_BY']."</TD>
			</TR>";
		}
	}
	else{
		echo "<tr>
			<td colspan='12'>Auncuns éléments</td>
		</tr>";
	}
echo "</table>
<script>
	$(document).ready(function(){
		$('#master2').on('click', function(e) {
			if($(this).is(':checked', true)) {
				$(\".sub_chk2\").prop('checked', true);  
			} else {  
				$(\".sub_chk2\").prop('checked', false);  
			}  
		});
	});
	function myFunction2() {
		var input, filter, table, tr, td, i;
		input = document.getElementById(\"myInput2\");
		filter = input.value.toUpperCase();
		table = document.getElementById(\"myTable2\");
		tr = table.getElementsByTagName(\"tr\");
		for (i = 0; i < tr.length; i++) {
		td = tr[i].getElementsByTagName(\"td\")[2];
		if (td) {
			if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
			tr[i].style.display = \"\";
			} else {
			tr[i].style.display = \"none\";
			}
		}       
		}
	}
</script>";

Quelqu'un pourrais m'aider ?

Merci

Cirvent

**Sodium** · 07/01/2019, 12h29

Houla, c'est compliqué à lire, pourquoi est-ce que tout ton HTML se fait dans des echos ?

Tout le premier bloc peut être mis simplement en HTML :

Code HTML :

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

1
2
3
4
5
6
7
8
<table id="myTable2" class="table table-bordered table-hover">
	<thead>
	<tr>
		<th width="50"><input type="checkbox" id="master2"></th>
		<th width="210"><button type="submit" class="btn-xs btn-primary pull-left delete_all2">Supprimer la sélection</button></th>
	        // ...
	</tr>
	</thead>

Et au lieu de

Code :

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

1
2
3
while($data2 = $query_pending->fetch())
		{
			echo "<TR data-row-id2=\"".$data2['ID']."\">

tu peux faire

Code PHP :

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

1
2
3
4
5
 
<?php while ($data2 = $query_pending->fetch()): ?>
    <tr data-row-id2="<?php $data2p['id']; ?>">
    // ....
<?php endwhile; ?>

Bon courage à celui qui aura la motivation de debugger ce pâté, personnellement je n'ai pas encore avalé assez de café

**CosmoKnacki** · 07/01/2019, 14h20

C'est en effet illisible en l'état. Une fois débarrassé des echo et des échappements qui vont avec, ça donne ça:

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
50
<table id="myTable2" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th width="50"><input type="checkbox" id="master2"></th>
            <th width="210"><button type="submit" class="btn-xs btn-primary pull-left delete_all2">Supprimer la sélection</button></th>
            <th class="NAME"><input type="text" id="myInput2" onkeyup="myFunction2()" placeholder="Name"></th>
            <th class="TYPE">Type</th>
            <th class="FOURNISSEUR">Fournisseur</th>
            <th class="STATUS">Status</th>
            <th class="OWNERS">Owners</th>
            <th class="BUY_BY">Acheteur</th>
        </tr>
    </thead>
<?php if ($count_pending != '0'): ?>
    <?php while ($data2 = $query_pending->fetch()): ?>
 
    <tr data-row-id2="<?=$data2['ID']?>">
        <td><input type="checkbox" class="sub_chk2" data-id2="<?=$data2['ID']?>">  <a class="delete_certificats" data-id="<?=$data2['ID']?>" href="javascript:void(0)"><i class="glyphicon glyphicon-trash"></i></a></td>
        <td>
            <select name="action" onchange="location = this.value;">
                <option>Sélectionner une action ...</option>
                <option value="index.php?module=certificats&action=finalized&id=<?=$data2['ID']?>">Finalser</option>
                <option value="index.php?module=certificats&action=show&id=<?=$data2['ID']?>">Visualiser</option>
                <option value="index.php?module=certificats&action=edit&id=<?=$data2['ID']?>">Editer</option>
                <option value="index.php?module=certificats&action=upload&id=<?=$data2['ID']?>">Uploader un fichier</option>
        <?php if ($data2['CSR_FILE'] != null): ?>
                <option value="kernel/download.php?type=1&id=<?=$data2['ID']?>&token=<?=$_SESSION['token_download']?>">Télécharger le CSR</option>
        <?php endif;?>
        <?php if ($data2['PRIVATE_KEY_FILE'] != null): ?>
                <option value="kernel/download.php?type=2&id=<?=$data2['ID']?>&token=<?=$_SESSION['token_download']?>">Télécharger la clé privée</option>
        <?php endif;?>
        <?php if ($data2['CRT_FILE'] != null): ?>
                <option value="kernel/download.php?type=3&id=<?=$data2['ID']?>&token=<?=$_SESSION['token_download']?>">Télécharger le certificat</option>
        <?php endif;?>
            </select>
        </td>
        <td class="NAME"><?=$data2['NAME']?></td>
        <td class="TYPE"><?=$data2['TYPE']?></td>
        <td class="FOURNISSEUR"><?=$data2['RAISON_SOCIAL']?></td>
        <td class="STATUS"><?=$data2['STATUS']?></td>
        <td class="OWNERS"><?=$data2['OWNERS']?></td>
        <td class="BUY_BY"><?=$data2['BUY_BY']?></td>
    </tr>
    <?php endwhile;?>
<?php else: ?>
    <tr>
        <td colspan="12">Auncuns éléments</td>
    </tr>
<?php endif;?>
</table>

Code :

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
<script>
$(document).ready(function() {
    $('#master2').on('click', function(e) {
        if ( $(this).is(':checked', true) ) {
            $('.sub_chk2').prop('checked', true);  
        } else {  
            $('.sub_chk2').prop('checked', false);  
        }  
    });
});
 
function myFunction2() {
    var input, filter, table, tr, td, i;
 
    input = document.getElementById('myInput2');
    filter = input.value.toUpperCase();
    table = document.getElementById('myTable2');
    tr = table.getElementsByTagName('tr');
 
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName('td')[2];
        if (td) {
            if ( td.innerHTML.toUpperCase().indexOf(filter) > -1 ) {
                tr[i].style.display = '';
            } else {
                tr[i].style.display = 'none';
            }
        }       
    }
}
</script>

Et là on se rend compte que soit il n'y a aucun gestionnaire d'événement qui s'occupe du clique sur le bouton supprimer, soit celui-ci se trouve dans une partie du code que tu n'as pas montrée.

Sinon, du point de vue lisibilité, tu peux aussi placer tout le javascript dans des fichiers externes et remplacer tous les attributs html contenant du javascript par des gestionnaires d'événements.

**cirvent** · 07/01/2019, 17h29

Bonjour,

Merci pour vos réponse,

Effectivement voici le script du bouton supprimer qui est dans un fichier js, je fait également appel à bootbox.min.js:

Code :

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
$(document).ready(function(){	
	$('.delete_all2').click(function(e){
		e.preventDefault();
		var allVals = [];
    $(".sub_chk2:checked").each(function() {  
        allVals.push($(this).attr('data-id2'));
		});  
		if(allVals.length <=0)
    {
        alert("Merci de sélectionner des lignes !");  
    }
    else { 
			var join_selected_values = allVals.join(",");
			bootbox.dialog({
				message: "Êtes-vous sûr de vouloir supprimer ces entrées ?",
				title: "<i class='glyphicon glyphicon-trash'></i> Suppression !",
				buttons: {
				success: {
					label: "NON",
					className: "btn-success",
					callback: function() {
					$('.bootbox').modal('hide');
					}
				},
				danger: {
					label: "OUI",
					className: "btn-danger",
					callback: function() {
						$.post('kernel/ajax.php?action=certificats_mass_delete', { 'ids':join_selected_values })
						.done(function(response){
							bootbox.alert(response);
							$.each(allVals, function( index, value ) {
								$('table tr').filter("[data-row-id2='" + value + "']").remove();
							});
						})
						.fail(function(response){
							bootbox.alert(response);
						})
					}
				}
				}
			});
		}
	});
});

**CosmoKnacki** · 07/01/2019, 20h08

Ok, en fait il suffit de filtrer ta liste de lignes sélectionnées de manière à n'avoir que les éléments visibles en ajoutant .filter(':visible'). J'ai réuni le script à la fin de ton premier post (en partie réécrit) et celui de ton dernier post:

Code :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
$(document).ready( function() {
 
    $('#master2').change(function() { $('.sub_chk2').prop('checked', $(this).prop('checked')); });
 
    $('.sub_chk2').change(function() { if ( !$(this).is(':checked') ) $('#master2').prop('checked', false); });
 
    $('#myInput2').on('keyup', function() {
        const filter = $(this).val().toUpperCase();
 
        $('#myTable2 tbody tr td:nth-child(3)').each(function() {
            if ( $(this).text().toUpperCase().indexOf(filter) > -1 ) {
                $(this).parent().show();
            } else {
                $(this).parent().hide();
            }
        });
    });
 
    $('.delete_all2').click(function(e) {
        e.preventDefault();
        var allVals = [];
 
        $('.sub_chk2:checked').filter(':visible').each(function() {  
            allVals.push($(this).attr('data-id2'));
        });
 
        if ( !allVals.length ) {
            alert("Merci de sélectionner des lignes !");
            return;
        }
 
        var join_selected_values = allVals.join(",");
 
        bootbox.dialog({
            message: 'Êtes-vous sûr de vouloir supprimer ces entrées ? ' + join_selected_values,
            title: '<i class="glyphicon glyphicon-trash"></i> Suppression !',
            buttons: {
                success: {
                    label: "NON",
                    className: "btn-success",
                    callback: function() {
                        $('.bootbox').modal('hide');
                    }
                },
                danger: {
                    label: "OUI",
                    className: "btn-danger",
                    callback: function() {
                        $.post('kernel/ajax.php?action=certificats_mass_delete', { 'ids':join_selected_values })
                         .done(function(response) {
                            bootbox.alert(response);
                            $.each(allVals, function( index, value ) {
                                $('table tr').filter('[data-row-id2="' + value + '"]').remove();
                            });
                        })
                         .fail(function(response) {
                            bootbox.alert(response);
                        })
                    }
                }
            }
        });
    });
});

Dans le html J'ai aussi ajouter l'élément tbody manquant et enlevé le onkeyup="myfunction2()".

Si tu veux moins galérer, en plus des conseils des précédents messages, adopte une politique de nommage de tes éléments et de tes variables.

**cirvent** · 07/01/2019, 20h27

Wao, je te remercie, cela fonctionne parfaitement.

Encore un fois un grand merci.

Cirvent

Tableau cocher des checkbox et filtre

jQuery

Vue hybride

Discussions similaires

Partager

Partager