Discussion :

[leame]

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 :

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

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!

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

[leame]

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

merci pour ton aide kakashi sensei ^^

[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).

[leame]

la partie HTML:

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

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
 
$("#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 :

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

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

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

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

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

est-ce que ça fonctionne ?