Designed by Gaetan !
160 en ligne   Boutique | Sites | Bar | Forum | PhpBB | Actu | Glossaire | Codes | Tips | Liens | Livres | Lettre  


 Recherche

 NewsLetter





   

[Javascript] Tri dynamique de listes (1/3)





jollt
Les listes que nous affichons sont généralement pré-triées sur certaines colonnes, et il faut recharger la page pour que l'ordre de tri puisse être modifié.
En se basant sur le type Array du javascript et de sa méthode .sort, il est très simple de mettre en place des listes dont le tri s'effectue par simple clic des entêtes de colonne.


Principes - Fonctions JavaScript - Exemple


PRINCIPES

Les tableaux en javascript sont définis par le type Array. Pour construire la liste nous utiliserons un tableau à 2 dimensions (Array[i][j]) et sa méthode .sort.
Vous pouvez renseigner le tableau de la manière qui vous convient (ASP, PHP, lecture de fichier, ...)

La méthode sort trie l'objet Array existant. Aucun nouvel objet Array n'est créé.
L'argument passé doit être une fonction à 2 arguments retournant l'une des valeurs suivantes :
     - Une valeur négative pour inverser le 1er argument et le 2nd.
     - Une valeur positive pour ne pas inverser les deux arguments.

Cette fonction doit être déclarée de la manière suivante
function TrierColDesc(x1,x2)
{   
   // Tri descendant sur chaîne de caractères
   return (x1[iColSel].toUpperCase() > x2[iColSel].toUpperCase())? -1 : 1;
}

x1 et x2 sont des arguments 'virtuels', représentant deux 'lignes' du tableau.
On va comparer la valeur de la colonne iColSel de chacune de ces lignes (test entre Array[1][iColSel] et Array[2][iColSel], puis entre Array[1][iColSel] et Array[3][iColSel], ...)

Sort parcourant l'ensemble des lignes pour trier le tableau, il n'est pas nécessaire de passer les arguments x1 et x2 lors de l'appel de la fonction :
Array.sort(TrierColDesc)

La mise en place de ce principe pour construire une liste va nécessiter l'utilisation de plusieurs fonctions :
     - Une fonction construisant la liste à partir de la variable Array
     - Une fonction déclenchant le tri pour une colonne et un type de variable (string, date, ...)
     - Toutes les fonctions de tri nécessaires à traiter les différents type de variables.

Ces fonctions sont détaillées dans la page suivante.

Pour pouvoir écrire dans ce forum, identifiez-vous !

  v1.3p © ASP-PHP.net 2002  

jollt le 13/01/2004 (69 460 hits)
Didier 11 logiciels Microsoft GRATUITS dont Visual Studio 2008 Pro,
SQL Server 2005, Expression Studio, Windows Server 2003, Office project Pro, etc... !!!
Au fil des news  
Magazines - Le n°108 de Programmez est disponible
Adobe - Téléchargez gratuitement le dossier spécial Adobe
Magazines - Le N°107 de Programmez est disponible.
Créer une Feature d'administration sous SharePoint - Comment créer un composant d'administration
Dans les précédents articles, nous avons évoqué la création de pages personnalisées dans ...
PHP - Afficher une date : multilangage et relative
Agenda - Inscrivez-vous au WygDay [Wygwam] le 22/5 à Lille
Sync Framework - Introduction au MS Sync Framework - Installation
Microsoft, lors du Keynote du TechEd Europe 2007, a annoncé la mise à disposition d'un nouveau ...
Reporting Services et SharePoint - Utiliser SharePoint comme source de données
Dans un précédent article, nous avons pu apprendre comment créer un rapport utilisant une source de ...
JavaScript - Affiche un calendrier sous une zone de saisie
Adobe - Adobe lance la version bêta publique de Photoshop
Microsoft Expression Web - Premier contact
Je suis revenu des Techday's 2008 avec une idée en tête. Je voulais savoir comme travailler avec ...
PHP & MySQLi - de Hello / Sector One
Hello de Sector One propose un article avec PHP et MySQLi, la nouvelle extension de MySQL
VBScript - Zip de fichiers automatique et efface la source
Dreamweaver CS3 + Php + Mysql - Trucs et Astuces - Part 4 -
Pour changer, deux nouvelles astuces pour vous . Alternate Colors. Inscription et envoi de mail
Magazines - Le N°106 de Programmez est disponible.
Divers - Zone Webmasters
PHP5 - Classe de connexion à MySQL
Agenda - 20/03 : Boostez vos applis PHP-Windows Server 2008
Créer un thème graphique pour WSS V3 - Comment créer un thème graphique pour WSS V3
Nous avons vu dans un précédent article comment créer une master page. Il peut parfois être ...
Les plans de maintenance et SQL Server 2000 - Installer un plan de maintenance sous SQL Server
Dans le cadre de la gestion d'instances SQL Server 2000 hébergeant SharePoint, il est intéressant ...
PHP - PHP et MYSQL - MySQLi - PDO
Jeux de l'été (et de 4) - Un petit jeu de Mastermind
C'est reparti pour un tour... Il y avait longtemps que je n'étais pas venu vous proposer un petit ...
Migration WSS avec un Site Template spécifique - Migration WSS avec un Site Template spécifique
Les précédents articles nous ont permis de voir les différents modes de migration de WSS V2 vers ...
DataBase Upgrade de WSS V2 vers WSS V3 - Upgrade de WSS V2 vers WSS V3 par la DataBase
Parmi les trois modes de migration de Windows SharePoint Services V2 vers WSS V3, nous avons vu les ...
Création de module DotNetNuke en C# - Source : Jerome Fortias sap-integration.net
Je vous propose un nouvel article consacré au développement de modules pour DotNetNuke en C#. Il ...
ASP-PHP.net - On sera aux MS TechDays 2008 ! et vous ?
Créer son modèle de rapports SSRS - Créer son modèle de rapports Reporting Services
Après la création du modèle de style pour Reporting Services, il est souhaitable aussi d'avoir un ...
PHP - publipostage sur rtf préformaté avec mysql
Créer son style de rapports SSRS - Créer son style de rapports Reporting Services
Lorsqu'on travaille avec Reporting Services pour développer ses rapports, on veut très souvent ...
.NET - C#2 et ASP.NET 2.0 - Développez un projet de A à Z
SharePoint - MOSS 2007 - De l'intégration au développement
PHP - PHP 5 MySQL 5 AJAX
Découverte de Visual Studio 2008 -
Microsoft a annoncé, lors du TechEd'07 organisé à Barcelone, la mise à disposition de la release de ...
Adobe - Photoshop Elements 6 Version MAC
Adobe - Adobe sur Intergraphic 2008
Reporting Services et données XML - Utiliser des données XML dans Reporting Services
Une demande récente que j'ai reçue : Comment utiliser des données provenant d'un flux XML dans ...
Dreamweaver CS3 + XML + Ajax - Création d'une région détail
Dans cet article, je vais vous montrer comment utiliser la technique région détail, avec Spry
PHP - Jolie arborescence dynamique
Magazines - Le N°104 de Programmez est disponible
PHP - PhPBB 3.0.0 !!!
Tutorial : HTML | Scripting | ASP-PHP | ASP.net | SQL Server | XML
Sharepoint | XAML | Pocket | Dreamweaver | VML | Divers
  Scripts : Scripting | ASP-PHP | ASP.net | Divers
  Boutique | Annuaire | Bannières | Météo | Tribune | Partenariats
v3 © Didier 2003   
 

Corpo Sciences de Reims Partitions gratuites Carte, météo, annonces
 ASP-magazine El Roubio TechNet Wygwam MVP Codes Sources The Inquirer FR Groupes Utilisateurs Microsoft DotNet Project CodePPC