CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 15:45:04

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Divers

> TRI DE TABLEAU HTML, SCRIPT ORIENTÉ OBJET

TRI DE TABLEAU HTML, SCRIPT ORIENTÉ OBJET

Information sur la source

Note :

9,00 / 10

Catégorie :Divers Classé sous :tri, tableau, html, poo Niveau :Initié Date de création :13/10/2005 Vu / téléchargé :14 054 / 1 319

Auteur : zilx

Ecrire un message privé

Site perso

Commentaire sur cette source (12)

Ajouter un commentaire et/ou une note

Description

Ce script est une adaptation du code de ce script : http://www.javascriptfr.com/code.aspx?id=29926 (auteur LARION).
J'ai programmé cette version en objet. Il est très facile d'utilisation, les fleches permettant d'activer le tri sur tel ou tel colonne sont ajoutées par le script dans les entêtes ainsi que les évènements correspondant (onClick).

Ce script utilise la très bonne librairie prototype.js que vous pouvez télécharger ici : http://prototype.conio.net/

Source

EXEMPLE D'UTILISATION
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Trier des tableaux html</title>
<script type="text/javascript" src="../prototype.js"></script>
<script type="text/javascript" src="sortHTMLTable.js"></script>
</head>
<body>
<br>
<table id="users">
<tr>
<th>Number</th>
<th>String</th>
<th>Date</th>
</tr>
<tr>
<td>12</td>
<td>Albert</td>
<td>23/02/1926</td>
</tr>
<tr>
<td>4</td>
<td>Roger</td>
<td>12/10/1973</td>
</tr>
<tr>
<td>1</td>
<td>Celine</td>
<td>13/12/1983</td>
</tr>
<tr>
<td>1</td>
<td>Isabelle</td>
<td>19/03/1983</td>
</tr>
<tr>
<td>-15</td>
<td>Emily</td>
<td>30/11/1983</td>
</tr>
</table>
<table id="users2">
<tr>
<th>Number</th>
<th>String</th>
<th>Date</th>
</tr>
<tr>
<td>22</td>
<td>Francis</td>
<td>23/02/1926</td>
</tr>
<tr>
<td>45</td>
<td>Frank</td>
<td>12/10/1973</td>
</tr>
<tr>
<td>11</td>
<td>Raoul</td>
<td>13/12/1983</td>
</tr>
<tr>
<td>-1</td>
<td>Joceline</td>
<td>19/03/1983</td>
</tr>
<tr>
<td>15</td>
<td>Julie</td>
<td>30/11/1983</td>
</tr>
</table>
<script type="text/javascript">
new sortHTMLTable( 'users' );
new sortHTMLTable( 'users2' );
</script>
</body>
</html>

EXEMPLE D'UTILISATION

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Trier des tableaux html</title>
  <script type="text/javascript" src="../prototype.js"></script>
  <script type="text/javascript" src="sortHTMLTable.js"></script>
</head>
<body>
<br>
<table id="users">
	<tr>
		<th>Number</th>
		<th>String</th>
		<th>Date</th>
	</tr>
	<tr>
		<td>12</td>
		<td>Albert</td>
		<td>23/02/1926</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Roger</td>
		<td>12/10/1973</td>
	</tr>
	<tr>
		<td>1</td>
		<td>Celine</td>
		<td>13/12/1983</td>
	</tr>
	<tr>
		<td>1</td>
		<td>Isabelle</td>
		<td>19/03/1983</td>
	</tr>
	<tr>
		<td>-15</td>
		<td>Emily</td>
		<td>30/11/1983</td>
	</tr>
</table>
<table id="users2">
	<tr>
		<th>Number</th>
		<th>String</th>
		<th>Date</th>
	</tr>
	<tr>
		<td>22</td>
		<td>Francis</td>
		<td>23/02/1926</td>
	</tr>
	<tr>
		<td>45</td>
		<td>Frank</td>
		<td>12/10/1973</td>
	</tr>
	<tr>
		<td>11</td>
		<td>Raoul</td>
		<td>13/12/1983</td>
	</tr>
	<tr>
		<td>-1</td>
		<td>Joceline</td>
		<td>19/03/1983</td>
	</tr>
	<tr>
		<td>15</td>
		<td>Julie</td>
		<td>30/11/1983</td>
	</tr>	
</table>
<script type="text/javascript">
new sortHTMLTable( 'users' );
new sortHTMLTable( 'users2' );
</script>
</body>
</html>

Fichier Zip

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

fleche_bas.png 154 octets
fleche_haut.png 152 octets
sortHTMLTable.js 7 442 octets
test.html 1 330 octets

Télécharger le zip

Sources du même auteur

AIDE AU CHOIX DANS LES LONGS SELECT (PAYS PAR EXEMPLE)

Toutes les sources de zilx

Sources de la même categorie

MOOTABLEAU par Miky76

CALCULER VOTRE IMC par lesnouesremy

CONSOLE DOS par djebbipgm

PLUGIN JQUERY ARTE: AJOUTER DU TEMPS REEL SUR VOS PAGES WEB par arthurobriot

FAIRE UN FILTRE DES VILLES par scropfi01

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

MOOTABLEAU par Miky76

TRI DE TABLEAU, ALGORITHME LES PLUS CONNUS IMPLÉMENTÉS (FUSI... par the_wwt

AFFICHAGE, ÉDITION GRAPHIQUE DE TABLEAUX par thebmxeur

TRI DE TABLEAUX HTML par coucou747

TRI MULTI-COLONNES D'UN TABLEAU HTML par bultez

Commentaires et avis

Commentaire de gb24 le 14/10/2005 14:02:52

Ok ça marche...suffit d'aller chercher le prototype.js et aucun pb : du premier coup et sans manip..
Mais serait-il possible à un surdoué d'ajouter une fenêtre d'attente pendant que le tri se fait car pour une grosse table on ne sait pas trop ce qui se passe !!!!!!!!

Commentaire de zilx le 17/10/2005 00:46:38

Cela doit pouvoir ce faire, je vais étudier le problème !

Commentaire de hind99 le 17/10/2005 01:54:00

j'aime bien savoir le code en javascript qui calcul le nombre des mots dans une chaine de caractére merci

Commentaire de Ramdn le 22/12/2005 11:08:17

salut, jarriv pas a trouver 'prototype.js
merci et a+

Commentaire de opilouo le 22/03/2006 18:28:26

Comment on fait pour que le tri ne se fasse pas dans une colonne ? que les fleche ne s'affiche pas ?

Commentaire de cmicdev le 09/11/2006 18:24:19

Salut, c'est un super outil!!

Mais j'ai quand même une petite question:

J'ai 2 formulaire en php:
- sur le premier, j'affiche le tableau de trie
- je fais différents tris, c'est OK
- ensuite je clique sur une ligne du tableau et j'affiche le détail dans un autre formulaire

Le problème, c'est lorsque je reviens sur le premier formulaire (contenant le tableau), le trie des colonnes à disparu.

Comment faire pour réafficher le tableau tel que je l'ai trié à l'origine ?

Merci

Commentaire de piedpierre le 19/02/2007 07:29:07

la Fameuse regexp cellContent = this.tableToSort.rows[1].cells[cellCpt].innerHTML.replace( /<\/?[^>]+>/gi, "" );
Sert à virer d'éventuelles balises (img,a,etc) de la cellule pour en avoir juste le contennu texte

Commentaire de fanfouer le 10/04/2007 00:46:33

Bonsoir, petit probleme avec cette classe, sous FF 2.0.0.3 , le navigateur me renvoi une erreur au niveau de la 40ème ligne : {pathToImgUp:"fleche_haut.png", pathToImgDown:"fleche_bas.png"}.extend is not a function

D'ou cela provient-il? La librairie prototype a été téléchargée et les images des fleches up & down sont au meme niveau que mon fichier php.

Merci et je pense que quand ca marchera, ca vaudra bien 10 :)

Commentaire de fanfouer le 10/04/2007 15:56:02

Non, plus de problème, c'était simplement la version de prototype.js qui n'était pas la bonnne (on trouve la 1.5 alors qu'il fallait la 1.3, que j'ai trouvé dans une autre source).

Bravo, super travail :)

Commentaire de sacados12 le 17/05/2007 21:35:19

J'ai un problème même en téléchargeant la bonne source de prototype cela ne fonctionne pas ... Je suis le vilain petit canard ! Chez tous le monde cela fonctionne quelqu'un pourrait-il le mettre en ligne ? Merci d'avance

Commentaire de na_no_net le 18/05/2007 17:38:46

Bonjours ;

Je veux modifier cet fonction pour pouvoir triée seulement quelque colonne
Par ce que j'ai un tableau qui contient dans le 1ere colonne des checkbox alors je voudrai pas que la fonction tri cette colonne (par ce que il cause des problème dans cette cas)
Merci d'avance pour votre aide.

Commentaire de Tchupacabra le 08/06/2007 17:03:37

Moi j'ai une erreur avec
.extend( options || {} );
du début...

Comment corriger ce problème ?

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Tri de colonnes d'un tableau html grâce à un js [ par ebenedzer ] SalutJe n'arrive pas à trouver comment je peux trier les colonnes d'un tableau fait en html, à l'aide d'un javascript.Est-ce que je dois met 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 à bulles d'un tableau HTML [ par Airman31 ] Tout d'abord bonjour à tous, J'ai besoin d'un petit coup de main pour une fonction Javascript que je suis en train d'implémenter : tri à bulle sur un Drag and drop dans un tableau HTML [ par dedeisep2 ] Dupliquer une ligne d'un tableau html javascript DOM [ par lord1366 ] Bonjour, voici mon problème : Je voudrais copier une ligne d'un tableau html (celà fonctionne sous Mozilla, Opera, Safari, IE8 mais pas sous IE6 et I HTML : changer image arriere plan tableau au passage souris [ par ju0123456789 ] Bonjour,Je voudrais savoir comment peut-on faire changer l'image d'arrière plan d'un tableau (page HTML) au passage de la souris n'importe où sur le tri de tableau multiple [ par PROTECTIONNISTE ] Bonjour,Je voudrais pouvoir classer via un élèment de tableau et ressortir ce tri convenablement. j'expliques car pour le moment ça veut rien dire ;-) Exporter un tableau contenu dans une page html vers un document text [ par chezeu ] J'ai un tableau contenu dans une page html. Je voudrais exporter ce tableau vers un document text à partir d'un bouton.N'y a t'il pas une fonction qui parcours d'un tableau HTML [ par billy21121 ] Bonjour a tous, Voila j'ai un petit probleme. Je crée un tabnleau en php qui contient a chaque ligne un champ texte. l'utilisateur saisi des info récupérer données dans tableau html [ par benajp ] Bonsoir, je débute et je suis en train de créer un site pour un CE.J'ai un tableau html renseigné en php par une base sql. Jusque là tout va bien.Main

Nos sponsors

Derniers Blogs

[DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE par tja

TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice

TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

Forum

RE : COUPER UNE PARTIE DE CHAINE par nhervagault

COUPER UNE PARTIE DE CHAINE par bydouille

JE VEUX LE CODE D'ANNIMATION AVEC JAVASCRIPT par dalinda

J'AI TROUVéE UN CODE SOURCE SUR INTERNET ET J'AI PAS LE COMPRIS par dalinda

RE : RéCUPERER LA TAILLE D'UN DIV par bumbo

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche formation complete en GIMP
Budget : 750€
Module sur Prestashop
Budget : 700€
Redaction d-une page de vente pour un ebook
Budget : 300€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5