Discussion :

[manuzed78]

Suite à mon précédent post sur jqSuite / jqGrid
je découvre datatables,

Apres 2 jours de découverte, voici un petit résumé :
comme datatables s'appuie sur le html existant(option la plus simple pour les premieres utilisations) le code à pondre par rapport à jqGrid est plus important.
Je n'ai pas encore trouvé certains éléments : l'aspect CRUD ( pas de formulaire pour insérer et éditer), si le CRUD existe, y a t il un datepicker, un autocomplete ?
J'utilise le css de jQuery :

Code :

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

1
2
3
4
$(document).ready(function() {
		$('#tableau1').dataTable( {
			"bJQueryUI": true,
                        "sPaginationType": "full_numbers",

il fonctionne à moitié : le tableau en lui meme est bien formaté mais les lignes <tr> restent avec le bleu d'origine ...
malgré le clear : both; de la class datatables_wrapper, mon tableau se retrouve toujours en dessous de mon menu flottant à gauche alors que mon datatables se trouve dans un div lui meme non affecté par ce probleme...
De plus ( mais cela ne doit pas etre un bug) les fleches permettant le filtre par colonne se retrouvent en bas du titre (augmentant ainsi la hauteur de <thead>) et non plus à coté.

Mais apres les conseils de Spacefrog et ma découverte de datables, j'en suis ravi : sur jqGrid, les recherches par mot clé ne sont pas multichamps et fonctionnent uniquement sur le début du champ ! et datatables est ... GRATUIT
Sa simplicité de mise en oeuvre en général est à applaudir pour des néophytes comme moi!

Enfin, je garde mes questions difficiles sur les DataTables individual column filtering pour la suite car je n'arrive pas à les faire fonctionner (mais cela est du à mon niveau de comprehension en js car l'exemple fonctionne tres bien en local)

Merci d'avance pour vos conseils sur les points évoqués ci dessus.

[manuzed78]

Pour les couleurs du tableau, je suis directement allé les changer dans le css de datatables ...
Ragardez par la :

Code :

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

1
2
3
4
5
6
7
8
9
table.dataTable tr.odd { background-color: #f9ffd6; }
table.dataTable tr.even { background-color: white; }
 
table.dataTable tr.odd td.sorting_1 { background-color: #f9ffd1; }
table.dataTable tr.odd td.sorting_2 { background-color: #f6ffb3; }
table.dataTable tr.odd td.sorting_3 { background-color: #fbffeb; }
table.dataTable tr.even td.sorting_1 { background-color: #fffabd; }
table.dataTable tr.even td.sorting_2 { background-color: #fff6cb; }
table.dataTable tr.even td.sorting_3 { background-color: #fffadf; }

par contre si quelque'un a eu le probleme de flottement
"malgré le clear : both; de la class datatables_wrapper, mon tableau se retrouve toujours en dessous de mon menu flottant à gauche alors que mon datatables se trouve dans un div lui meme non affecté par ce probleme"
je n'ai toujours pas de solution