Discussion :

[sohnic]

Bonjour,
J'ai un dataTables, dans lequel il y a une case à cocher par ligne.
Je souhaite mettre en place la classique checkbox "tout cocher/décocher" (ça pourrait être un bouton, ou ce que vous voulez si ça solutionne le problème !). Bien sur, la sélection doit se faire sur toutes les pages du tableau.

J'ai la version où la checkbox de (dé)sélection globale est dans le dataTable en entête de colonne ou complètement en dehors du datatable. Dans les 2 cas le comportement est le même :

Si je coche, toutes mes checkbox sont sélectionnées. Cool.
Je décoche : toutes mes checkbox se désélectionnent. Recool.
Si je coche. Ca ne marche plus. Mes checkbox restent décochées. En fait il n'y a plus aucune action. Pourtant le script associé est toujours déclenché (les alertes que j'y avais insérées le prouvent) et il n'y a aucune erreur retournées dans la console.

Ci-dessous le code un peu simplifié dans l’entête de la page web

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready( function () {
   $('#searchTable').dataTable().columnFilter();
   var oTable = $('#searchTable').dataTable();
   $('#selectAll').click( function() {
	if ($('#selectAll').prop("checked"))
	{
		$('input', oTable.fnGetNodes()).attr('checked',true);
	}
	else
	{
		$('input', oTable.fnGetNodes()).attr('checked',false);
	}
  });
} );

Et dans le body :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<table cellpadding="0" cellspacing="0" border="0" class="display" id="searchTable">
<thead>
<tr><th><input type="checkbox"  id="selectAll"></th><th>auteur</th><th>titre</th><th>annee</th></tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="chk[]" value="1" id="chck"></td><td>un auteur</td><td>un titre</td><td>une annee</td></tr>
<tr><td><input type="checkbox" name="chk[]" value="2" id="chck"></td><td>un auteur</td><td>un titre</td><td>une annee</td></tr>
etc...
<tfoot>
...
</tfoot>
</table>

Merci pour votre aide,

Sohnic

[Bovino]

Encore une fois une confusion entre .attr() et .prop()...
Mise à jour de checkbox !

[sohnic]

Chapeau !
Ca fait des jours que je suis là-dessus. Et enfin, ça marche, merci beaucoup !
J'avoue que j'ai beaucoup de mal à trouver l'info pertinente. J'ai littéralement fait des jours de recherche (je ne connais pratiquement pas JQuery, alors ça a été un très gros apprentissage pour moi) pour sortir un joli truc.
Maintenant, mon challenge est de faire en sorte que ça marche aussi sur le tableau filtré, car tel que ca me "checke" les cases qui sont aussi masquées par le filtre (du tfoot).
Bien sur je cherche de mon côté, mais si vous avez un lien du même genre à me faire découvrir, n'hésitez pas !

Encore mille fois merci,

Sohnic

[Bovino]

Un truc du genre

Code :

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

$('input', oTable.fnGetNodes()).filter(':visible').attr('checked',true);

?

[sohnic]

Encore merci, à un détail près (comme quoi, j'ai bien appris ma lecon) :

Code :

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

1
2
 
$('input', oTable.fnGetNodes()).filter(':visible').prop('checked',true).change();

Et bien, vraiment merci, grâce à vous je vais passer un bon WE !

Bonne soirée,
Sohnic

[Bovino]

Bien vu !
Je m'étais contenté à tort d'un copié / collé de ton premier code.

[sohnic]

Je viens de me rendre compte que j'ai crié victoire trop vite.
La sélection ne se fait que sur la page visible du tableau et non sur toutes les pages.
Arghhh !

Je me dis aussi que la solution se trouve peut-être dans l'étape suivante, quand je récupère les données.

Code :

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

1
2
3
4
5
6
 
 $('#form').submit( function() {
        var sData = oTable.$('input').serialize();
        alert( "The following data would have been submitted to the server: \n\n"+sData );
        return false;
    } );

Donc tout sélectionner sans se poser de question :

Code :

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

1
2
 
$('input', oTable.fnGetNodes()).prop('checked',true).change();

Et appliquer le filtre au niveau du sérialize ?

Bien sur, si je trouve la combine, je vous tiens au courant.

S.

[sohnic]

Encore une petite question, de fond cette fois.
Sur le site de dataTables, on trouve plein de fonctions, d'exemples, etc...
Mais ça n'est pas là que j'ai trouvé les .prop et .attr, mais sur un forum.
Pour ta part, d'où tires-tu tes connaissances ?
Où aurais-je pu trouver trouver le fonctionnement de ces fonctions ?
Où as-tu trouvé la fonction filter() et son attribut visible (parce que même en en ayant connaissance, je fait chou blanc ! et je suppose qu'il y a d'autres attributs possibles) ?

Je crois que c'est mon problème principal avec JQuery, je suis incapable de trouver les informations pertinentes. C'est comme si il y avait des bout un peu partout sur la toile, mais aucune synthèse complète. Je me trompe ?

En tout cas, je n'ai jamais été confrontée à ce point à ce problème avec le PHP ou le perl... Au pire le tuto est trop simpliste ou incomplet, mais une fois qu'on a trouvé il y a tout. Et les sites de références sont généralement très complets ou donnent suffisamment d'indications pour aborder une recherche plus approfondie.

Enfin, des liens pertinents me rendraient vraiment service. Sur ce coup là, google ne m'a pas beaucoup aidé...

Encore merci,

Sohnic

[Bovino]

Ben... tu peux déjà regarder la dernière ligne de ma signature !
Sinon, tu as jQuery API Documentation.

[sohnic]

Bonjour,
Je n'avais même pas fait attention à ta signature
En tout cas, merci pour les liens. C'est beaucoup plus clair que ce que j'ai pu voir jusque là. Je crois que j'ai très mal orienté mes recherches dès le départ.

Je vais potasser un peu tout ça et voir ce que je peux en tirer pour répondre à mon problème. J'ai bien une petite idée derrière la tête, mais la rendre en code est pour l'instant très délicat pour moi. Mais je relève le défi.

Encore merci,

S.

[sohnic]

Bonjour,
J'ai enfin trouvé une solution (très inspirée des posts précédents) :
Petit rappel de la situation :
- On a un dataTable avec une checkbox par ligne.
- Le but est d'extraire les valeurs de chaque ligne sélectionnée (en fait un tableau de valeurs associées à chaque checkbox du dataTable, jusque là rien de plus classique)
- Comme le tableau peut être grand et est paginé, une possibilité de tout sélectionner est appropriée (les 300 lignes qui sont réparties sur 30 pages). Le problème est que ce tableau peut être filtré par l'utilisateur et dans ce cas, les lignes cachées sont aussi sélectionnées. De plus l'utilisateur peut décocher quelques checkbox.
Ex. : on a 300 lignes, après filtrage sur un mot clef, il en reste 250, et l’utilisateur ne s’intéresse pas à 3 des lignes et les décoche manuellement.
- Comment récupérer les 247 valeurs d’intérêt, réparties sur 25 pages de 10 lignes chacune ?

Dans mon formulaire, une boite à cocher pour faire "tout (de)selectionner" et un bouton qui valide la sélection :

Code html :

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

1
2
<input type="checkbox"  id="selectAll"> Select/deselect all<br />
<input type="button" id="basket" value="The selection" /><br />

Au niveau des scripts : la première solution de Bovino, sans se préoccuper du filtrage qui permet de tout (de)selectionner en cliquant la boite à cocher :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var oTable = $('#searchTable').dataTable();
    $('#selectAll').click( function() {
	if ($('#selectAll').prop("checked"))
	{
		$('input', oTable.fnGetNodes()).prop('checked',true).change();
	}
	else
	{
		$('input', oTable.fnGetNodes()).prop('checked',false).change();
	}
 
});

Et enfin, le bouton qui permet d'extraire les données est associé au code :

Code :

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

1
2
3
4
5
6
 var oTable = $('#searchTable').dataTable();
    $('#basket').click( function() {
	data=oTable.$('input',{"filter": "applied"} ).serialize();
 
	alert( data);
});

Un grand grand merci à toi Bovino !!

Sohnic