IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

personnalisation tableau datatable


Sujet :

jQuery

  1. #1
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 044
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : Belgique

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

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 044
    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 : 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
    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

  2. #2
    Membre éclairé Avatar de stomerfull
    Inscrit en
    Septembre 2005
    Messages
    307
    Détails du profil
    Informations forums :
    Inscription : Septembre 2005
    Messages : 307
    Par défaut
    bonjour,


    Oui tu peux faire ça avec Datable :
    http://datatables.net/examples/data_...rver_side.html

Discussions similaires

  1. [XL-2007] Personnalisation tableau croisé dynamique
    Par Ardiden31 dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 16/12/2013, 18h12
  2. Réponses: 1
    Dernier message: 11/05/2009, 17h15
  3. [Tableaux] Personnaliser un tableau en PHP
    Par L'aigle de Carthage dans le forum Langage
    Réponses: 7
    Dernier message: 04/04/2008, 11h00
  4. Réponses: 5
    Dernier message: 19/07/2007, 16h51
  5. [Swing][JTableHeader]Personnaliser le header d'un tableau
    Par LordBlaize dans le forum AWT/Swing
    Réponses: 1
    Dernier message: 16/02/2006, 16h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo