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

  1. #1
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    février 2006
    Messages
    3 652
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : février 2006
    Messages : 3 652
    Points : 4 762
    Points
    4 762

    Par défaut Rendre un tableau triable

    Voila un pti script permettant de rendre un tableau triable,

    seul contrainte respecter le format des entêtes sur lesquels les clicks s'effectueront

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <table>
    <thead>
    <tr>
    <td>colonne 1</td>
    <td>colonne 2</td>
    <td>colonne 3</td>
    </tr>
    </thead>
    ...
     
    </table>
    Le script :

    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
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    /**
     * @author Le_chomeur
     */
    var mSort = (function(){
     
    	var M$ = function(e){return document.getElementById(e);};
    	var M$$ = function(e,p){return p.getElementsByTagName(e)};
    	var Mh = function(t){
    				var lstHead = M$$('td',M$$('thead',t)[0]);
    				if(lstHead.length > 0)
    					return lstHead;
    				else return false;
    			};
    	var addEvent = function(func,onEvent,elementDom) { 
    					    if (window.addEventListener) { 
    							elementDom.addEventListener(onEvent, func, false); 
    						} else if (document.addEventListener) { 
    							elementDom.addEventListener(onEvent, func, false); 
    						} else if (window.attachEvent) { 
    							elementDom.attachEvent("on"+onEvent, func); 
    					    } 
    					};
    	return {
    		tabSort : null,
    		Create : function(tab){
    			this.tabSort = M$(tab);
    			var lstH = Mh(M$(tab));
    			//Si on trouve des entêtes de type TH , on va ajouter les évènements et propriétés d'odre de tri :
    			// 0 : descendant
    			// 1 : ascendant
    			if(lstH){
    				for(var i = 0 , imax = lstH.length ; i < imax; i++){
    					//Affectation du click sur l'entête
    					addEvent(function(indexCol){return function(){
    						if(this.order == undefined || this.order == 1){
    							this.order = 0;
    						}
    						else{
    							this.order = 1;
    						}
    					var order = (this.order == 0 )? true:false;
    					mSort.SortCol(indexCol , order);	
    					}}(i)
    					,"click",lstH[i]);
     
    				}
    			}
    			else{
    				alert("Le tableau ne comporte pas d'entête");
    			}
    		},
    		SortCol : function(indexCol,asc){
    			//Récupération de toutes les lignes du tableau
    			var lstTr = M$$('tr',this.tabSort);
    			var tabSortable = new Array();
    			//Récupération de toute les lignes
    			for(var i = 1 , imax = lstTr.length ; i < imax; i++){
    				var lstTd = M$$('td',lstTr[i]);
    				tabSortable.push(lstTd[indexCol]);
    				//Clone des cellules
    				tabSortable[i-1][0] = new Array();
    				for(var x = 0 , xmax = lstTd.length ; x < xmax; x++){
    					tabSortable[i-1][0].push(lstTd[x].cloneNode(true));
    				}
    			}
    			//Tri du tableau
    			tabSortable.sort((asc)? sortAsc:sortDsc);
    			//Création des lignes dans le nouvel ordre
    			var n = document.createElement('tbody');
    			for(var i = 0 , imax = tabSortable.length ; i < imax; i++){
    				var l = document.createElement('tr');
    				for (var x = 0, xmax = tabSortable[i][0].length; x < xmax; x++) {
    					l.appendChild(tabSortable[i][0][x]);					
    				}
    				n.appendChild(l);
    			}
    			var o = M$$('tbody',this.tabSort)[0];
    			this.tabSort.replaceChild(n,o);
    		},
    	}
    })(); 
     
    function sortDsc(b,a)
    {
    	//On commence par mettre en minuscule pour tester
    	a= a.innerHTML.toLowerCase(), b=b.innerHTML.toLowerCase();
    	//test si c'est une date au format ( 01/01/2010 ) avec le séparateur /
    	da = Date.parse(a);
      	db = Date.parse(b);
    	if(!isNaN(da) &&!isNaN(db)) {
         a = da;
         b = db
    	}
    	//Vérification sur les nombre ( entier et a virgule
    	na = parseFloat(a) , nb = parseFloat(b);
    	//Si ce n'est pas un chiffre
    	if(isNaN(na) && isNaN(nb)){
          	return a > b ? 1 : (a < b ?- 1 : 0);
    	}
    	return na-nb;
    }
    function sortAsc(a,b)
    {
    	//On commence par mettre en minuscule pour tester
    	a= a.innerHTML.toLowerCase(), b=b.innerHTML.toLowerCase();
    	//test si c'est une date au format ( 01/01/2010 ) avec le séparateur /
    	da = Date.parse(a);
      	db = Date.parse(b);
    	if(!isNaN(da) &&!isNaN(db)) {
         a = da;
         b = db
    	}
    	//Vérification sur les nombre ( entier et a virgule
    	na = parseFloat(a) , nb = parseFloat(b);
    	//Si ce n'est pas un chiffre
    	if(isNaN(na) && isNaN(nb)){
          	return a > b ? 1 : (a < b ?- 1 : 0);
    	}
    	return na-nb;
    }
    exemple d'utilisation :

    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
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>Untitled Document</title>
    	</head>
    	<body>
    		<table id='letableau'>
    		<thead>	
    			<tr>
    				<td>Nombre</td>
    				<td>string</td>
    				<td>date</td>
    				<td>Nombre a virgule</td>
    				<td>autre</td>
    			</tr>
    		</thead>	
    			<tr>
    				<td>42</td>
    				<td>vincent</td>
    				<td>23/05/2006</td>
    				<td>1.1</td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>2</td>
    				<td>francis</td>
    				<td>26/06/2004</td>
    				<td>1.09</td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>3</td>
    				<td>carole</td>
    				<td>19/01/2010</td>
    				<td>9.1</td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>18</td>
    				<td>xavier</td>
    				<td>28/05/2001</td>
    				<td>6.8</td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>67</td>
    				<td>nicolas</td>
    				<td>14/07/1989</td>
    				<td>4.5</td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>-5</td>
    				<td>nico</td>
    				<td>14/06/1989</td>
    				<td>6.1</td>
    				<td></td>
    			</tr>				
    		</table>
    		<table id="retour">
    		</table>
    		<script type="text/javascript" src="mSort.js"></script>
    		<script type="text/javascript">
        			mSort.Create('letableau');
    		</script>
    	</body>
    </html>

    pour l'utiliser :
    inclure le script :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script type="text/javascript" src="mSort.js"></script>
    puis utiliser la méthode Create , en spécifiant l'id du tableau :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    		<script type="text/javascript">
        			mSort.Create('letableau');
    		</script>
    voila
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  2. #2
    Membre du Club
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    février 2015
    Messages
    79
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : février 2015
    Messages : 79
    Points : 48
    Points
    48

    Par défaut

    Merci

Discussions similaires

  1. [Dojo] Comment laisser une ligne fixe dans un tableau triable ?
    Par Koma dans le forum Bibliothèques & Frameworks
    Réponses: 4
    Dernier message: 18/03/2009, 17h48
  2. [AJAX] Tableau triable ajax
    Par Kikinoubarca dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 19/06/2008, 10h44
  3. Modèles : Rendre un tableau modifiable
    Par sevenweb dans le forum Dreamweaver
    Réponses: 2
    Dernier message: 07/06/2007, 13h23
  4. Comment faire un tableau triable par un utilisateur ?
    Par mLk92 dans le forum PHP & MySQL
    Réponses: 9
    Dernier message: 15/08/2006, 10h52
  5. Rendre un tableau inextensible sous ie?
    Par Death83 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 23/12/2005, 11h49

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