Afficher tableau avec recherche
Bonjour les amis ;)
J'aimerai créer une petite fonction qui me permet d'afficher une ligne de mon tableau en fonction d'une recherche.
Par exemple j'ai un tableau qui liste des utilisateurs avec login, mail... Par defaut toutes mes lignes du tableau sont en display none pour être cachées. Chacune des ligne ont pour id le mail de l'utilisateur à qui elle correspond. Maintenant je voudrais ajouter un champs de recherche, un input basique où on tape une adresse mail, et une fonction en javascript enlève le display none de la ligne avec l'id = au mail tapé.
<table class="table table-hover table-bordered">
<thead>
<tr>
<th><?php echo __('Mail'); ?></th>
<th><?php echo __('Actions'); ?></th>
</tr>
</thead>
<?php foreach($potentiels as $k=>$v): ?>
<tr style="display:none;" id="<?php echo $v'User']'mail']; ?>">
<td><?php echo $v'User']'mail']; ?></td>
<td>
<?php echo $this->Html->link('<i class="icon-pencil"></i>'.__('Ajouter'), array('action'=>'add',$v'User']'id']),array('style'=>'color:#3fbcef;text-decoration:underline','escape'=>false)); ?> /
<?php echo $this->Html->link('<i class="icon-remove"></i>'.__('Supprimer'), array('action'=>'notclient',$v'User']'id']),array('style'=>'color:#df0024;text-decoration:underline','escape'=>false),'Voulez vous vraiment supprimer cet utilisateur ?'); ?>
</td>
</tr>
<?php endforeach; ?>
</table>Et en fait j'aimerai pouvoir avoir un truc comme ça quoi
<script type="text/javascript">
function afficher()
{
document.getElementById('LeMailQu'onATapé').style.display = '';
}
</script>
14 réponses
Il te faut jQuery en plus, est ce qu'il a bien été chargé ? Il ne faut lancer le code que lorsque le DOM est chargé, d'où la nécessité de rajouter jQuery(function(){});
jQuery(function() {
$(document).on('submit', '#searchForm', function(){
$search = $('#search').val();
alert($search);
$('table').find('td').each(function(){
if($(this).attr('id')== $search){
$(this).show();
}
});
return false;
});
});Salut,
enfait tu fais ton champs de recherche par exemple #search.
Tu recupères en jQuery son contenu avec
$search = $('#search').val();et ensuite tu fais donc
$(this).find('td').each(function(){
if($(this).attr('id')== $search){
$(this).show();
}
});Voila un truc du genre. Si j'ai bien compris ta question ;)
Merci pour tes précisions cependant comment indiquer l'action du formulaire ? Parce que là évidement si je rentre une adresse mail, et que j'envoi il ne se passe rien. Il faut préciser au formulaire qu'il doit aller chercher quoi faire dans le script jQuery... Mais comment qu'on fait ça ?
:D
<div class="row">
<div class="span12">
<h1 style="margin-bottom: 50px;"><?php echo __('Liste des utilisateurs enregistrés'); ?></h1>
<form>
<input type="text" name="search" id="search">
<input type="submit" value="Submit">
</form>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th><?php echo __('Mail'); ?></th>
<th><?php echo __('Actions'); ?></th>
</tr>
</thead>
<?php foreach($potentiels as $k=>$v): ?>
<tr style="display:none;" id="<?php echo $v'User']'mail']; ?>">
<td><?php echo $v'User']'mail']; ?></td>
<td>
<?php echo $this->Html->link('<i class="icon-pencil"></i>'.__('Ajouter'), array('action'=>'add',$v'User']'id']),array('style'=>'color:#3fbcef;text-decoration:underline','escape'=>false)); ?> /
<?php echo $this->Html->link('<i class="icon-remove"></i>'.__('Supprimer'), array('action'=>'notclient',$v'User']'id']),array('style'=>'color:#df0024;text-decoration:underline','escape'=>false),'Voulez vous vraiment supprimer cet utilisateur ?'); ?>
</td>
</tr>
<?php endforeach; ?>
</table>
</div>
</div>
<?php $this->Html->scriptStart(array('inline' => false)); ?>
$search = $('#search').val();
$(this).find('td').each(function(){
if($(this).attr('id')== $search){
$(this).show();
}
});
<?php $this->Html->scriptEnd(); ?>Alors tu donnes un id a ton form
<form id="searchForm" action="#">
<input type="text" name="search" id="search">
<input type="submit" value="Submit">
</form>Ensuite avec jQuery tu écoutes l'envoi du form.
<?php $this->Html->scriptStart(array('inline' => false)); ?>
$('#serachFrom').submit(function(){
$search = $('#search').val();
$(this).find('td').each(function(){
if($(this).attr('id')== $search){
$(this).show();
}
});
return false;
});
<?php $this->Html->scriptEnd(); ?>Voila un truc du genre devrait fonctionner.
Ah ok je comprends un peu mieux le principe, mais ça ne fonctionne pas. Après j'ai changé le td en tr parce que c'est sur le tr que j'ai l'id. Mais çe fonctionne pas mieux. J'ai essayé aussi de mettre un .style.display: ''; plutot que show et toujours rien.
Quand tu fais :
<?php $this->Html->scriptStart(array('inline' => false)); ?>
$('#serachFrom').submit(function(){
$search = $('#search').val();
alert($search);
$(this).find('td').each(function(){
if($(this).attr('id')== $search){
$(this).show();
}
});
return false;
});
<?php $this->Html->scriptEnd(); ?>As tu une alerte? Si oui est ce bien ce que tu as dans ta box de recherche?
J'ai fais une faute de frappe... si jamais tu as juste collé ca vien ptet de là.
Remplace :
$('#serachFrom').submit(function(){par
$('#searchFrom').submit(function(){prbaron tu es mon sauveur à chaque fois ;)
Maintenant que je n'ai plus trop de pb avec cakephp, faut que je me mette a jQuery ^^