Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript > Bibliothèques & Frameworks > jQuery
jQuery Forum d'entraide sur le framework jQuery. Avant de poster : Tutoriels jQuery, FAQ jQuery, Tous les tutoriels JavaScript, Toutes les FAQ JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 07/10/2011, 09h22   #1
Membre éprouvé
 
Avatar de gtraxx
 
Homme Aurélien Gérits
Développeur Web
Inscription : mai 2006
Messages : 1 045
Détails du profil
Informations personnelles :
Nom : Homme Aurélien Gérits
Âge : 30
Localisation : Belgique

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : mai 2006
Messages : 1 045
Points : 498
Points : 498
Par défaut personnalisation tableau datatable

Bonjour, j'ai une petite question
Depuis un bon moment je construit mes tableaux de données manuellement que je récupère pour afficher des éléments contenu dans la base de données.
cette méthode est assez pratique mais un peu limite tout de même lors du traitement de pas mal d'enregistrement.
Pour le moment je fais comme ceci :
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
$.ajax({
		url: 'json.php?list_pages=true',
		dataType: 'json',
		type: "get",
		async: true,
		cache:false,
		beforeSend: function(){
			$('#list_cms_pages').html('<img style="margin-left:450px;" class="tableloader" src="/img/loader/table-loader.gif" />');
		},
		success: function(j) {
			$('#list_cms_pages').empty();
			var tablecat = '<table class="ui-widget ui-widget-content" id="tablecontain">'
				+'<thead><tr class="ui-widget ui-widget-header"><th>ID</th>'
				+'<th style="width:1%;">Langue</th>'
				+'<th style="min-width:200px;">Titre</th>'
				+'<th>Contenu</th>'
				+'<th>Metatitle</th>'
				+'<th>Metadescription</th>'
				+'<th>Date de création</th>'
				+'<th style="width:16px;"><span class="lfloat dom-16-icon dom-16-icon-edit"></span></th>'
				+'<th style="width:16px;"><span class="lfloat dom-16-icon dom-16-icon-delete"></span></th>'
				+'</tr></thead>'
				+'<tbody>';
			tablecat += '</tbody></table>';
			$(tablecat).appendTo('#list_cms_pages');
				if(j === undefined){
					console.log(j);
				}
				if(j !== null){
					$.each(j, function(i,item) {
						switch(item.contentpage){
							case 1:
								var content = '<span class="lfloat dom-16-icon dom-16-icon-check"></span>';
							break;
							case 0:
								var content = '<span class="lfloat dom-16-icon dom-16-icon-important"></span>';
							break;
						}
						switch(item.metatitle){
							case 1:
								var metaTitle = '<span class="lfloat dom-16-icon dom-16-icon-check"></span>';
							break;
							case 0:
								var metaTitle = '<span class="lfloat dom-16-icon dom-16-icon-important"></span>';
							break;
						}
						switch(item.metadescription){
							case 1:
								var metaDescription = '<span class="lfloat dom-16-icon dom-16-icon-check"></span>';
							break;
							case 0:
								var metaDescription = '<span class="lfloat dom-16-icon dom-16-icon-important"></span>';
							break;
						}
						return $('<tr>'
						+'<td>'+item.idpage+'</td>'
						+'<td>'+item.cms_lang+'</td>'
						+'<td>'+item.titlepage+'</td>'
						+'<td>'+content+'</td>'
						+'<td>'+metaTitle+'</td>'
						+'<td>'+metaDescription+'</td>'
						+'<td>'+item.date_page+'</td>'
						+'<td><a href="/cms.php?cms_pages=true&getidpage='+item.idpage+'"><span class="lfloat ui-icon ui-icon-pencil"></span></a></td>'
						+'<td><a class="d-cms-pages" href="#" title="'+item.idpage+'"><span class="lfloat ui-icon ui-icon-closethick"></span></a></td>'
						+'</tr>').appendTo('#tablecontain tbody');
					});
				}else{
					return $('<tr>'
					+'<td><span class="lfloat ui-icon ui-icon-minus"></span></td>'
					+'<td><span class="lfloat ui-icon ui-icon-minus"></span></td>'
					+'<td><span class="lfloat ui-icon ui-icon-minus"></span></td>'
					+'<td><span class="lfloat ui-icon ui-icon-minus"></span></td>'
					+'<td><span class="lfloat ui-icon ui-icon-minus"></span></td>'
					+'<td><span class="lfloat ui-icon ui-icon-minus"></span></td>'
					+'<td><span class="lfloat ui-icon ui-icon-minus"></span></td>'
					+'<td><span class="lfloat ui-icon ui-icon-minus"></span></td>'
					+'<td><span class="lfloat ui-icon ui-icon-minus"></span></td>'
					+'</tr>').appendTo('#tablecontain tbody');
				}
			}
	});
Cette méthode me permet d'afficher les éléments avec pour chacun un lien pour aller vers l'édition ainsi qu'un lien de suppression.
Je m'intéresse fortement à datatable qui semble très bien pour ce genre de chose.
Cependant est il possible d'avoir la même chose ?
Dans le sens que j'ai besoin pour chaque élément d'avoir son petit crayon d'édition qui amène vers une véritable page (impossible de l'éditer dans datatable étant trop gros).
Je n'ai pas vu ce genre d'exemple dans la documentation mais peut être l'avez vous déjà utiliser de cette manière
__________________
Au petit déjeuner, je prend du PHP et au souper du jQuery.
AFUP 2009 : Bien optimiser son code pour le référencement
Mon projet open source de librairie PHP 5: magix cjquery
gtraxx est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/10/2011, 14h42   #2
Membre du Club
 
Avatar de stomerfull
 
Inscription : septembre 2005
Messages : 243
Détails du profil
Informations forums :
Inscription : septembre 2005
Messages : 243
Points : 42
Points : 42
bonjour,


Oui tu peux faire ça avec Datable :
http://datatables.net/examples/data_...rver_side.html
stomerfull est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 01h11.


 
 
 
 
Partenaires

Hébergement Web