begin process at 2010 03 22 03:21:47
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > MOOTABLEAU

MOOTABLEAU


 Information sur la source

Note :
Aucune note
Catégorie :Divers Classé sous :tableau, mootools, tri, scroll Niveau :Initié Date de création :08/02/2010 Date de mise à jour :12/02/2010 15:23:56 Vu / téléchargé :823 / 86
Auteur : Miky76

Ecrire un message privé
Site perso
Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note

 Description

Une classe mooTools qui transforme une balise table en un ensemble div/tables qui permet de visualiser au final un tableau avec barre de défilement, avec entêtes clickables pour définir le tri des données.

La bibliothèque mooTools (framework javascript) doit être chargé (version actuelle 1.2.4) dans la page et l'instanciation doit se faire dans l'évènement domready.

Le code source est dans l'archive, en guise de source je n'ai mis que le code html et l'appel javascript à la classe.

Pour voir un exemple tourner : http://sources.mightyprods.com/index.php?id=1

Source

  • <link type="text/css" rel="stylesheet" href="mooTableau.css" />
  • <script type="text/javascript" src="mooTableau.js"></script>
  • <script type="text/javascript">
  • window.addEvent('domready', function() {
  • new MooTableau($('montableau'));
  • });
  • </script>
  • <table id="montableau">
  • <thead><tr><th>Caractère</th><th>Numérique</th><th>Date</th></tr></thead>
  • <tbody><tr><td>Donnée a</td><td style="width: 70px;">10</td><td style="width: 100px;">01/02/2010</td></tr>
  • <tr><td>Donnée b</td><td>2</td><td>02/03/2010</td></tr>
  • <tr><td>Donnée c</td><td>21</td><td>01/04/2010</td></tr>
  • <tr><td>Donnée d</td><td>64</td><td>11/11/2009</td></tr>
  • <tr><td>Donnée e</td><td>33</td><td>31/12/2007</td></tr>
  • <tr><td>Donnée f</td><td>26</td><td>06/01/2011</td></tr>
  • <tr><td>Donnée g</td><td>14</td><td>13/03/2013</td></tr>
  • <tr><td>Donnée h</td><td>8</td><td>28/02/2010</td></tr>
  • <tr><td>Donnée i</td><td>120</td><td>12/12/2012</td></tr>
  • <tr><td>Donnée j</td><td>101</td><td>10/12/2012</td></tr>
  • <tr><td>Donnée k</td><td>1</td><td>30/11/2010</td></tr>
  • <tr><td>Donnée l</td><td>12</td><td>12/01/2010</td></tr>
  • </tbody>
  • </table>
<link type="text/css" rel="stylesheet" href="mooTableau.css" />
<script type="text/javascript" src="mooTableau.js"></script>

<script type="text/javascript">
  window.addEvent('domready', function() {
    new MooTableau($('montableau'));
  });
</script>

<table id="montableau">
<thead><tr><th>Caractère</th><th>Numérique</th><th>Date</th></tr></thead>
<tbody><tr><td>Donnée a</td><td style="width: 70px;">10</td><td style="width: 100px;">01/02/2010</td></tr>
       <tr><td>Donnée b</td><td>2</td><td>02/03/2010</td></tr>
       <tr><td>Donnée c</td><td>21</td><td>01/04/2010</td></tr>
       <tr><td>Donnée d</td><td>64</td><td>11/11/2009</td></tr>
       <tr><td>Donnée e</td><td>33</td><td>31/12/2007</td></tr>
       <tr><td>Donnée f</td><td>26</td><td>06/01/2011</td></tr>
       <tr><td>Donnée g</td><td>14</td><td>13/03/2013</td></tr>
       <tr><td>Donnée h</td><td>8</td><td>28/02/2010</td></tr>
       <tr><td>Donnée i</td><td>120</td><td>12/12/2012</td></tr>
       <tr><td>Donnée j</td><td>101</td><td>10/12/2012</td></tr>
       <tr><td>Donnée k</td><td>1</td><td>30/11/2010</td></tr>
       <tr><td>Donnée l</td><td>12</td><td>12/01/2010</td></tr>
</tbody>
</table>

 Conclusion

La classe est une ébauche, il se peut qu'il y ait des coquilles dans le code, toute suggestion / critique est la bienvenue, mon but étant de partager et aussi de la faire évoluer.

Mon premier source ici, j'espère ne pas avoir fait d'impair, soyez indulgents !

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

12 février 2010 15:24:14 :
Modification du zip : chemin par défaut au répertoire courant Modification du source d'appel pour l'inclusion du css et du script au répertoire courant.

 Sources du même auteur

Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS
Source avec Zip MOOTOOLTIP
Toutes les sources de Miky76

 Sources de la même categorie

Source avec Zip Source avec une capture SÉQUENCEUR par jdmcreator
Source avec Zip COMPRESSION DE TEXTE CÔTÉ CLIENT EN JS VIA ALGORYTHME LZW par niamor36
Source avec Zip VIRTUAL IPHONE (V.2) par loicseg
Source avec Zip CALCULER VOTRE IMC par lesnouesremy
Source avec Zip PLUGIN JQUERY ARTE: AJOUTER DU TEMPS REEL SUR VOS PAGES WEB par arthurobriot
Toutes les sources de la catégorie Divers

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture TRI DE TABLEAU, ALGORITHME LES PLUS CONNUS IMPLÉMENTÉS (FUSI... par the_wwt
Source avec Zip Source avec une capture AFFICHAGE, ÉDITION GRAPHIQUE DE TABLEAUX par thebmxeur
Source avec Zip TRI DE TABLEAUX HTML par coucou747
Source avec Zip TRI DYNAMIQUE DE TABLEAU HTML, MULTI COLONNES, ORIENTÉ OBJET... par vb1
Source avec Zip TRI DE TABLEAU HTML, SCRIPT ORIENTÉ OBJET par zilx

Commentaires et avis

Commentaire de julesouley le 12/02/2010 14:31:02

Pourquoi tu mets pas tous les .js dans les bon répertoire. ton zip est incomplet ! rien ne marche ! c'est pas à nous d'aller chercher les .js qui manquent.
Par exemple dans le fichier mootableau.js tu déclare :
var chemin = 'demos/mooTableau/'; // Chemin où se trouve le script
alors que dans ton zip il ya pas de /demo/mootableau/
fait en sorte que ton code marche sans qu'on se c**** les c***** a voir ce qui ne va pas !!

cordialement !

Commentaire de Miky76 le 12/02/2010 15:02:10

Dans la variable chemin il suffit de rentrer le chemin ou se trouve le script, si vous mettez le dossier "mootableau" dans un sous dossier "scripts" par exemple, il faut mettre "/scripts/mootableau/" dans la variable chemin, j'espère que c'est plus clair pour vous maintenant.

Désolé que vous le preniez ainsi, je ne poste pas pour vous c***** quoi que ce soit, mais pour partager ce source que j'utilise moi même dans mon travail, si cela vous énerve à ce point je ne peux que vous conseiller de passez votre chemin !

Commentaire de Miky76 le 12/02/2010 15:09:28

Edit : si vous mettez le dossier "mootableau" dans un sous dossier "scripts" par exemple, il faut mettre "/scripts/mootableau/" dans la variable chemin.

Comprendre => si vous mettez le contenu de l'archive (les scripts et les ressources graphiques) dans un dossier "mootableau" et que ce dossier vous le mettez dans un dossier "scripts", il faut mettre "/scripts/mootableau/" dans la variable chemin.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

tableau avec tri dynamique [ par rcedric ] Salut a tous,voila mon probleme; je cherche à afficher un tableau et que lorsqu l'on clic sur le libellé le tableau est trié et réafficher dynamiqueme pb de scroll dans un tableau [ par nejo ] salut je débute vraiment dans la prog et la je bloque:mon site est dans un tableau et je désire mettre du texte dans une cellule mais quand mon texte tri d'un tableau numérique [ par sylcasi ] bonjour,je suis encore en panne :comment faire pour trier un tableau numérique :sachant que c'est un tableau à plusieurs colonnes dont la première est tableau + scroll bar [ par perechev ] Bonjour,Je cherche &#224; fair un tableau avec lequel je pourrais le regarder enti&#232;rement avec une scroll bar mais je ne sais pas si cela peut se pb tri tableau! [ par joduak ] salut je voudrai savoir comment on fait un tri d'un tableau javascript de nombres? genre: tableau[0]=4 tableau[1]=8 tableau[2]=23 etc...dans l'ordre c Trier dynamiquement un tableau HTML (à l'aide de XML, XSL, Javascript) [ par edevouge ] Bonjour, Dans le cadre d'un stage, j'ai besoins de créer un tableau html à partir d'un fichier XML et d'un fichier XSL. Et grâce au JavaScript, je v Tri de tableau associatif [ par cydelic ] Bonjour, J&#8217;ai un petit probl&#232;me de tri... je vous explique Rien de bien compliquer, j&#8217;ai un tableau associatif du genre&nbsp;: var Tri de colonnes d'un tableau html grâce à un js [ par ebenedzer ] SalutJe n'arrive pas &#224; trouver comment je peux trier les colonnes d'un tableau fait en html, &#224; l'aide d'un javascript.Est-ce que je dois met Tri de tableau [ par Evangun ] Bonjour à tous,je me demande pourquoi quand je trie mon tableau alphabétiquement, ils sont tous bon sauf le premier qui est mis en dernière position ! Tri (fonction sort) [ par John_Doe_88 ] Salut tlm,J'utilise la fonction sort pour trier un tableau, mais ce tableau peut être très grand et dans ce cas j'obtiens un message dans le navigateu


Nos sponsors


Sondage...

Comparez les prix


Motorola MILESTONE
Entre 489€ et 489€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,686 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)