DataTable - Mettre une valeur dans le filtre de recherche

Version imprimable

09/02/2016, 14h04
leame

DataTable - Mettre une valeur dans le filtre de recherche
Bonjour,

J'ai une DataTable avec un filtre de recherche, j'aimerai pouvoir mettre une valeur dans cet 'input' mais quand je mets la valeur, le filtre ne s'active pas, il faut que je bouge le curseur dans le champs pour que le filtre se fasse.

Pouvez vous m'aider?
Code:

1 2 3 4 var filtre = $('#filtreRecherche').val(); $('#contents .dataTables_filter input').focus(); $('#contents .dataTables_filter input').val(filtre);
J'ai essayé de faire un .blur() et un .change() mais ça ne marche pas..
j'ai essayé de déplacer le curseur dans le champs par jQuery mais je n'y arrive pas... je ne sais donc pas si ça marcherait..

Je sais pas si je suis très clair dans mon problème..

Merci pour votre aide!8O
09/02/2016, 14h36
kakashi99

Bonjour,

il faut que tu lances un des événements que datatable "écoute" pour la recherche, de mémoire "keydown/keyup", "cut/paste", "search".

je t'ai fais un petit exemple : https://jsfiddle.net/kakashi99/zxnmfpcp/2/
09/02/2016, 16h08
leame

Merci! bon pour l'instant ça ne marche toujours pas:koi: .. ca ajoute bien ma valeur au bout de 3 secondes (mais ca j'y arrivais deja :P)..mais le filtre ne s'effectue toujours pas... je vais voir si je peux adapter.

merci pour ton aide kakashi sensei ^^
09/02/2016, 16h39
kakashi99

de rien ;)

par contre si tu veux plus d'aide il va falloir nous en montrer un peu plus, le top c'est le code html de la page générée (select source depuis ton navigateur).

la partie HTML:

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
 
<div id="contents" class="invisible">
	<table id="liste_dossiers" class="dataTable">
		<thead>
			<th class="ui-state-default" style="width: 5%;">Date modif.</th>
			<th class="ui-state-default" style="width: 5%;">N&deg; dossier</th>
			<th class="ui-state-default" style="width: 4%;">R&eacute;gion</th>
			<th class="ui-state-default" style="width: 4%;">Dep</th>
			<th class="ui-state-default" style="width: 4%;">Collectivit&eacute;</th>
			<th class="ui-state-default" style="width: 5%;">N&deg; Agent</th>
 
 
		</thead>
		<tbody>
		    <!-- BEGIN dossiers -->
		    <tr class="{$dossier.classe}">
		        <td>{$dossier.date_modif}</td>
		        <td class="lien_dossier" onclick="ajoutFiltre(this)">{$dossier.num_dossier}</td>
		        <td>{$dossier.region}</td>
		        <td>{$dossier.departement}</td>
		        <td>{$dossier.collectivite}</td>
		        <td>{$dossier.num_agent}</td>
		    </tr>
		    <!-- END dossiers -->
		</tbody>
	</table>
<span id="ligneMax" style="display:none;">{$numMax}</span>
<span id="ligneTot" style="display:none;">{$nbAgents}</span>
</div>
 
<input type="button" id="blop" value="LA" />

initialisation de la dataTable

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
$("#liste_dossiers").dataTable({
        "bPaginate" : true,
        "bLengthChange" : true,
        "bFilter" : true,
        "sPaginationType" : "two_button", // "full_numbers",
        "bSort" : true,
        "order" : 'desc',
        "bInfo" : true,
        "bAutoWidth" : true,
        "bJQueryUI" : true,
        "bDestroy" : false,
        "bRetrieve" : true,
        "sDom" : '<lipf>t', // enlever pour retrouver la mise en forme originale avec les blocs gris en haut et en bas
        "aaSorting" : [[0 , 'desc']],
        "aoColumns" : [{
            "sType" : "date-uk"
        }, { "bSortable": false }, 
        { "bSortable": false }, { "bSortable": false }, 
        { "bSortable": false }, { "bSortable": false }]
    });

je peux pas trop en donner plus..:?
j'ai testé sur ta page, même sans le settimeOut ça fonctionne donc j'ai essayé chez moi mais ça ne marche toujours pas.
J'ai créé un bouton bidon sur ma page pour lancer l'action (au cas ou je ne le mettrais tout simplement pas au bon endroit) mais ça ne fonctionne pas non plus.

Code:

1
2
3
4
5
6
7
 
$('#blop').click(function(){
        var filtre = $('#filtreRecherche').val();
        //$('#contents .dataTables_filter input').focus();
 
        $('#liste_dossiers_filter input').val(87).trigger('search');
    });

10/02/2016, 09h02
kakashi99

hello,

est-ce que tu as des erreurs dans ta console javascript ? tu utilises quel navigateur ? quelle version de datatable utilises-tu ? j'ai mis à jour mon exemple, ça fonctionne (mais j'ai du enlever 2 options qui faisaient planter le script) : https://jsfiddle.net/kakashi99/zxnmfpcp/3/

si tu testes en initialisant ta table sans aucun paramètre

Code:

$("#liste_dossiers").dataTable();

est-ce que ça fonctionne ?
10/02/2016, 09h50
leame

Bonjour,

je n'ai pas d'erreur dans ma console, j'utilise Chrome et la datatables version 1.9.4.

J'ai essayé en déclarant la dataTable sans paramètre ça ne marche pas, et en enlevant les 2 mêmes paramètres que toi non plus..:weird:
10/02/2016, 10h51
kakashi99

huuuum... il semblerait que l'événement "search" ne fonctionne pas en 1.9.4, essaye avec "keyup", ou alors passe en 1.10.10 ;)
10/02/2016, 11h53
leame

YATA!!:bravo: !! ça fonctionne avec le "keyup"! Merci beaucoup!!:merci:

ça me sauve, parce que changer de version n'était pas de mon ressort :P