Tableau cocher des checkbox et filtre

Version imprimable

1 pièce(s) jointe(s)

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.

Pièce jointe 439324

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

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:

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:

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

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é :aie:

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

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

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.

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:

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);
						})
					}
				}
				}
			});
		}
	});
});

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:

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.

07/01/2019, 20h27
cirvent

Wao, je te remercie, cela fonctionne parfaitement.

Encore un fois un grand merci.

Cirvent