[Résolu] Probleme javacript tableau

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

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
Modifié par cirvent (07 Jan 2019 - 11:25)

Bonjour,

La question est un peu confuse. Tu cliques où et tu saisis quoi au clavier ? C'est quoi la liste des actions que tu fais exactement ?

Amicalement,
Modifié par parsimonhi (07 Jan 2019 - 13:42)

Merci pour votre réponse,

Donc si l'on clique dans le champs "Name" est que l'on écrit la lettre "t", la dernière ligne disparait, et si l'on coche la checkbox à coté du bouton"supprimer la sélectionne" cela sélection les 3 ligne (même la caché).

je ne veux pas cocher les lignes masquées.

Cirvent

Bonjour,

C'est la ligne ci-dessous qu'il faut modifier :

$(\".sub_chk2\").prop('checked', true); 

Tel qu'elle est, elle sélectionne tous les éléments ayant pour classe "sub_chk2".

Y a plein de manières de traiter ce problème. Je pense que le plus simple est de t'inspirer du code de myFunction2() en écrivant une autre fonction myFunction3() pour traiter ça : c'est la même logique, sauf qu'au lieu de donner à des tr un display:none, tu vas cocher la case des inputs de la première colonne. Ensuite, il suffit de faire en sorte que ce soit cette fonction myFunction3() qui soit exécutée lorsque tu cliques sur la case en haut à gauche.

Amicalement,

J'ai trouvé une réponse à mon problème,

pour ce qui auront le même problème :

il faut remplacer les 2 scripts de mon premier post par :

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

Merci de votre aide.

Cirvent
Modifié par cirvent (07 Jan 2019 - 20:42)