+ Répondre à la discussion
Affichage des résultats 1 à 19 sur 19
  1. #1
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Inscrit en
    mars 2002
    Messages
    35 302
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 35 302
    Points : 59 702
    Points
    59 702
    Billets dans le blog
    1

    Par défaut Tri de tableau HTML ( <table> )

    Un petit script pour trier un tableau html

    Code HTML :
    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
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <style type="text/css">
    input {width:100px;}
    td {border: solid 1px black;
     
        width :80px;
        }
    table {border-collapse: collapse;}
    </style>
    <title>Table sorter</title>
    <script type='text/javascript'>
     
    function DESC(a,b)
    {
    a=a[1]
    b=b[1]
    if(a > b)
          return -1
       if(a < b)
          return 1
       return 0
    } 
     
    function ASC(a,b){
    a=a[1]
    b=b[1]
    if(a > b)
          return 1
       if(a < b)
          return -1
       return 0
     }
     
     
     
     
    function sortTable(tid, col, ord){
    mybody=document.getElementById(tid).getElementsByTagName('tbody')[0]
    lines=mybody.getElementsByTagName('tr')
    var sorter=new Array()
    sorter.length=0
    var i=-1;
    while(lines[++i]){
    sorter.push([lines[i],lines[i].getElementsByTagName('td')[col].innerHTML])
    }
    sorter.sort(ord)
    j=-1
    while(sorter[++j]){
    mybody.appendChild(sorter[j][0])
    }
     
    }
    </script>
    </head>
     
    <body>
    <table id="matable">
    	<tr>
    		<td>a</td>
    		<td>r</td>
    	</tr>
    	<tr>
    		<td>b</td>
    		<td>i</td>
    	</tr>
    	<tr>
    		<td>c</td>
    		<td>v</td>
    	</tr>
    	<tr>
    		<td>d</td>
    		<td>b</td>
    	</tr>
    	<tr>
    		<td>e</td>
    		<td>o</td>
    	</tr>
    	<tr>
    		<td>f</td>
    		<td>z</td>
    	</tr>
    		<tr>
    		<td>1</td>
    		<td>23</td>
    	</tr>
    		<tr>
    		<td>10</td>
    		<td>24</td>
    	</tr>
    		<tr>
    		<td>2</td>
    		<td>25</td>
    	</tr>
     
    	</table>	
    	Alphabétique<br/>
    	colonne 1<br/>
    	<input type="button" onclick="sortTable('matable',0,DESC)" value="tri desc col 1" />
    	<input type="button" onclick="sortTable('matable',0,ASC)" value="tri asc col1" /><br/>
    	colonne 2<br/>
    	<input type="button" onclick="sortTable('matable',1,DESC)" value="tri desc col2" />
    	<input type="button" onclick="sortTable('matable',1,ASC)" value="tri asc col2" /><br/>
    	<br/>
     
    </body>
     </html>

    Syntaxe d'utilisation:

    Code :
    sortTable('matable',0,DESC)
    paramètres de la fonction:
    Code :
     sortTable(tid, col, ord)
    tid = id de la table
    col = indexe de colonne à trier
    ord= asc ou desc


    Dans cette première version le tri est alphabétique uniquement

    Je cherche un moyen d'intégrer le tri alpha numérique...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  2. #2
    Rédacteur
    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    4 727
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 4 727
    Points : 17 917
    Points
    17 917
    Billets dans le blog
    10

    Par défaut

    Bonsoir

    Voici, je crois que c'est correct, les trois solutions (alpha, num, alphanum) en asc et en desc.

    Nota Bene : j'ai utilisé du jQuery bien entendu, mais cela ne change rien à ton code d'origine sauf pour le tri.

    Nota Bene : le tri alpha ou alphanum ne fonctionne pas sur les caractères (minuscules ou majuscules) accentués.

    Je pensais avoir trouvé la solution avec a[1].localeCompare(b[1]) mais cela ne fonctionne pas avec tous les navigateurs. Même avec Firefox il y a parfois des soucis avec Firebug alors que cette méthode est bien renseignée dans la documentation JavaScript de Mozilla.


    Code :
    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
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    <!doctype html>
    <html lang="fr">
    <head>
    	<meta http-equiv="X-UA-Compatible" content="chrome=1">
    	<meta charset="utf-8">
    	<meta name="Author" content="Daniel Hagnoul">
    	<title>Forum jQuery</title>
    	<style>
    		/* Base */
    		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
    		font-weight:normal; line-height:normal; letter-spacing:normal; }
    		h1,h2,h3,h4,h5 { font-family:serif; }
    		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
    		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
    		p { padding:6px; }
    		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
    		color:#000000; border:1px solid #666666; }
     
    		/* Test */
    	</style>
    </head>
    <body>
    	<h1>Forum jQuery</h1>
    	<div id="conteneur">
     
    <table id="matable">
    	<tbody>
    		<tr>
    			<td>a</td>
    			<td>r</td>
    		</tr>
    		<tr>
    			<td>b</td>
    			<td>i</td>
    		</tr>
    		<tr>
    			<td>c</td>
    			<td>v</td>
    		</tr>
    		<tr>
    			<td>d</td>
    			<td>b</td>
    		</tr>
    		<tr>
    			<td>e</td>
    			<td>o</td>
    		</tr>
    		<tr>
    			<td>f</td>
    			<td>z</td>
    		</tr>
    			<tr>
    			<td>1</td>
    			<td>23</td>
    		</tr>
    			<tr>
    			<td>10</td>
    			<td>24</td>
    		</tr>
    			<tr>
    			<td>2</td>
    			<td>25</td>
    		</tr>
    	</tbody>
    </table>
     
    <div>
    	<p>Alphabétique<br/>colonne 1</p>
    	<input type="button" onclick="sortTable('matable',0, 'desc')" value="tri desc col 1" />
    	<input type="button" onclick="sortTable('matable',0, 'asc')" value="tri asc col1" /><br/>
     
    	<input type="button" onclick="sortTable('matable',0, 'ndesc')" value="tri num desc col 1" />
    	<input type="button" onclick="sortTable('matable',0, 'nasc')" value="tri num asc col1" /><br/>
     
    	<input type="button" onclick="sortTable('matable',0, '?desc')" value="tri alphanum desc col 1" />
    	<input type="button" onclick="sortTable('matable',0, '?asc')" value="tri alphanum asc col1" />
     
    	<p>colonne 2</p>
    	<input type="button" onclick="sortTable('matable',1, 'desc')" value="tri desc col2" />
    	<input type="button" onclick="sortTable('matable',1, 'asc')" value="tri asc col2" /><br/>
     
    	<input type="button" onclick="sortTable('matable',1, 'ndesc')" value="tri num desc col2" />
    	<input type="button" onclick="sortTable('matable',1, 'nasc')" value="tri num asc col2" /><br/>
     
    	<input type="button" onclick="sortTable('matable',1, '?desc')" value="tri alphanum desc col2" />
    	<input type="button" onclick="sortTable('matable',1, '?asc')" value="tri alphanum asc col2" />
    </div>
     
    	</div>
    	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    	<script>
     
    function sortTable(tid, col, ord){
    	var mybody = $("#"+tid).children('tbody'),
    		lines = mybody.children('tr'),
    		sorter = [],
    		i = -1,
    		j = -1;
     
    	while(lines[++i]){
    		sorter.push([lines.eq(i), lines.eq(i).children('td').eq(col).text()])
    	}
     
    	if (ord == 'asc') {
    		sorter.sort();
    	} else if (ord == 'desc') {
    		sorter.sort().reverse();
    	} else if (ord == 'nasc'){
    		sorter.sort(function(a, b){return(a[1] - b[1]);});
    	} else if (ord == 'ndesc'){
    		sorter.sort(function(a, b){return(b[1] - a[1]);});
    	} else if (ord == '?asc'){
    		sorter.sort(function(a, b){
    			var x = parseInt(a[1], 10),
    				y = parseInt(b[1], 10);
     
    			if (isNaN(x) || isNaN(y)){
    				if (a[1] > b[1]){
    					return 1;
    				} else if(a[1] < b[1]){
    					return -1;
    				} else {
    					return 0;
    				}
    			} else {
    				return(a[1] - b[1]);
    			}
    		});
    	} else if (ord == '?desc'){
    		sorter.sort(function(a, b){
    			var x = parseInt(a[1], 10),
    				y = parseInt(b[1], 10);
     
    			if (isNaN(x) || isNaN(y)){
    				if (a[1] > b[1]){
    					return -1;
    				} else if(a[1] < b[1]){
    					return 1;
    				} else {
    					return 0;
    				}
    			} else {
    				return(b[1] - a[1]);
    			}
    		});
    	}
     
    	while(sorter[++j]){
    		mybody.append(sorter[j][0]);
    	}
    }
     
    		$(function(){
    		});
     	</script>
    </body>  
    </html>

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Inscrit en
    mars 2002
    Messages
    35 302
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 35 302
    Points : 59 702
    Points
    59 702
    Billets dans le blog
    1

    Par défaut

    Daniel,

    j'avais en effet fait des tests avec parseInt, *1 ...
    j'avais juste zappé la différenciation isNaN du coup pour l'aphanum ça passait pas ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  4. #4
    Expert Confirmé Sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    5 643
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 5 643
    Points : 6 801
    Points
    6 801

    Par défaut

    bonjour Spacefrog,

    une chose me surprend dans ton code :
    Code :
    mybody.appendChild(sorter[j][0])
    alors que sorter est de type Array et ne contient que du texte

    Du coup le appendChild() crée indirectement des champs texte ?
    En plus quand on sait que appendChild() ajoute un élément et ne remplace pas un élément par un autre, j'avoue que quelque chose m'a échappé

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Inscrit en
    mars 2002
    Messages
    35 302
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 35 302
    Points : 59 702
    Points
    59 702
    Billets dans le blog
    1

    Par défaut

    Code :
    sorter.push([lines[i],lines[i].getElementsByTagName('td')[col].innerHTML])
    si tu regardes bien, sorter est un array d'arrays

    je push un array contenant le tr... et le innerHTML de la colone à trier

    d'ou le sort sur le [1] et le append du [0]
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  6. #6
    Rédacteur
    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    4 727
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 4 727
    Points : 17 917
    Points
    17 917
    Billets dans le blog
    10

    Par défaut

    Bonsoir

    Il y avait un petit bug dans le tri alphanum, un a au lieu d'un a[1] et idem pour le b.

    [Edit]

    Nota Bene : le tri alpha ou alphanum ne fonctionne pas sur les caractères (minuscules ou majuscules) accentués.

    Je pensais avoir trouvé la solution avec a[1].localeCompare(b[1]) mais cela ne fonctionne pas avec tous les navigateurs. Même avec Firefox il y a parfois des soucis avec Firebug alors que cette méthode est bien renseignée dans la documentation JavaScript de Mozilla.

  7. #7
    Rédacteur
    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    4 727
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 4 727
    Points : 17 917
    Points
    17 917
    Billets dans le blog
    10

    Par défaut

    Bonsoir

    En combinant les efforts de chacun, voici une solution qui semble fonctionner pour les caractères accentués :

    Code html :
    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
    <table id="matable">
    	<tbody>
    		<tr>
    			<td>enchanteur</td>
    			<td>réel</td>
    		</tr>
    		<tr>
    			<td>échange</td>
    			<td>indélicat</td>
    		</tr>
    		<tr>
    			<td>en vrac</td>
    			<td>véridique</td>
    		</tr>
    		<tr>
    			<td>2.00</td>
    			<td>23.25</td>
    		</tr>
    		<tr>
    			<td>éparpiller</td>
    			<td>bon</td>
    		</tr>
    		<tr>
    			<td>échangiste</td>
    			<td>échangeur</td>
    		</tr>
    		<tr>
    			<td>enchanté</td>
    			<td>Allo</td>
    		</tr>
    		<tr>
    			<td>2.64</td>
    			<td>23.02</td>
    		</tr>
    		<tr>
    			<td>2.05</td>
    			<td>23.00</td>
    		</tr>
    	</tbody>
    </table>

    Code javascript :
    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
    /*
     * SPaceFrog
     * [RegExp]remplacement / suppression de caractères accentués ou autres ...
     * "http://www.developpez.net/forums/d1018129/webmasters-developpement-web/contribuez/regexp-remplacement-suppression-caracteres-accentues-autres/"
     */
    function replaceSpec(Texte){
    	var TabSpec = {"à":"a","á":"a","â":"a","ã":"a","ä":"a","å":"a","ò":"o","ó":"o","ô":"o","õ":"o","ö":"o","ø":"o","è":"e","é":"e","ê":"e","ë":"e","ç":"c","ì":"i","í":"i","î":"i","ï":"i","ù":"u","ú":"u","û":"u","ü":"u","ÿ":"y","ñ":"n","-":" ","_":" "},
    		reg=/[àáâãäåòóôõöøèéêëçìíîïùúûüÿñ_-]/gi;
     
    	return Texte.replace(reg, function(){
    		return TabSpec[arguments[0].toLowerCase()];
    	}).toLowerCase();
    }
     
    /*
     * Daniel Hagnoul
     * tri de tableau html
     * "http://www.developpez.net/forums/d1025830/webmasters-developpement-web/contribuez/tri-tableau-html/#post5718196"
     */
    function sortTable(tid, col, ord){
    	var mybody = $("#"+tid).children('tbody'),
    		lines = mybody.children('tr'),
    		sorter = [],
    		i = -1,
    		j = -1;
     
    	while(lines[++i]){
    		sorter.push([lines.eq(i), lines.eq(i).children('td').eq(col).text()])
    	}
     
    	if (ord == 'asc') {
    		sorter.sort(function(a, b){
    			var c1 = replaceSpec(a[1]),
    				c2 = replaceSpec(b[1]);
     
    			if (c1 > c2){
    				return 1;
    			} else if(c1 < c2){
    				return -1;
    			} else {
    				return 0;
    			}
    		});
    	} else if (ord == 'desc') {
    		sorter.sort(function(a, b){
    			var c1 = replaceSpec(a[1]),
    				c2 = replaceSpec(b[1]);
     
    			if (c1 > c2){
    				return -1;
    			} else if(c1 < c2){
    				return 1;
    			} else {
    				return 0;
    			}
    		});
    	} else if (ord == 'nasc'){
    		sorter.sort(function(a, b){return(a[1] - b[1]);});
    	} else if (ord == 'ndesc'){
    		sorter.sort(function(a, b){return(b[1] - a[1]);});
    	} else if (ord == '?asc'){
    		sorter.sort(function(a, b){
    			var x = parseInt(a[1], 10),
    				y = parseInt(b[1], 10),
    				c1 = replaceSpec(a[1]),
    				c2 = replaceSpec(b[1]);
     
    			if (isNaN(x) || isNaN(y)){
    				if (c1 > c2){
    					return 1;
    				} else if(c1 < c2){
    					return -1;
    				} else {
    					return 0;
    				}
    			} else {
    				return(a[1] - b[1]);
    			}
    		});
    	} else if (ord == '?desc'){
    		sorter.sort(function(a, b){
    			var x = parseInt(a[1], 10),
    				y = parseInt(b[1], 10),
    				c1 = replaceSpec(a[1]),
    				c2 = replaceSpec(b[1]);
     
    			if (isNaN(x) || isNaN(y)){
    				if (c1 > c2){
    					return -1;
    				} else if(c1 < c2){
    					return 1;
    				} else {
    					return 0;
    				}
    			} else {
    				return(b[1] - a[1]);
    			}
    		});
    	}
     
    	while(sorter[++j]){
    		mybody.append(sorter[j][0]);
    	}
    }

  8. #8
    Responsable JavaScript & AJAX

    Avatar de vermine
    Inscrit en
    mars 2008
    Messages
    4 853
    Détails du profil
    Informations personnelles :
    Âge : 29

    Informations forums :
    Inscription : mars 2008
    Messages : 4 853
    Points : 43 230
    Points
    43 230

    Par défaut Vous avez un supporter !

    Merci à vous pour cet exercice collectif.

  9. #9
    Expert Confirmé Sénior
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    février 2006
    Messages
    3 645
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : février 2006
    Messages : 3 645
    Points : 4 695
    Points
    4 695

    Par défaut

    Waou po mal

    dite ça ne vous dirait pas de rendre la fonction de tri générique et d'externalisé la génération des lignes du tableau ??

    Moi j'dis ça , je ne dis rien hein ^^

    [EDIT]

    Mes excuses je n'avais pas vu le post juste en dessous
    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 )

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Inscrit en
    mars 2002
    Messages
    35 302
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 35 302
    Points : 59 702
    Points
    59 702
    Billets dans le blog
    1

    Par défaut

    le but n'est pas de générer des lignes ...
    mais de trier des lignes existantes ...

    quel serait le but de la génération .?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  11. #11
    Expert Confirmé Sénior
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    février 2006
    Messages
    3 645
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : février 2006
    Messages : 3 645
    Points : 4 695
    Points
    4 695

    Par défaut

    Pardon je me suis mal exprimé :

    - Je pensais effectivement a la fonction de tri autonome

    Spaffy : je suis pt bientôt de retour !!! t'expliquerais en MP
    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 )

  12. #12
    Membre éprouvé

    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2007
    Messages
    403
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : Belgique

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

    Informations forums :
    Inscription : octobre 2007
    Messages : 403
    Points : 469
    Points
    469

    Par défaut

    Voici ma version, optimisable mais fonctionnelle :

    Code :
    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
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    	<head>
    		<title>Table natsorter</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<style type="text/css">
    			table{
    				border-collapse:collapse;
    			}
    			th{
    				background-color:grey;
    				color:white;
    			}
    			th,td{
    				border:solid 1px black;
    				width :80px;
    			}
    		</style>
    	</head>
    	<body>
    		<table id="matable">
    			<tr>
    				<th>col1</th>
    				<th>col2</th>
    			</tr>
    			<tr>
    				<td>a</td>
    				<td>5</td>
    			</tr>
    			<tr>
    				<td>b</td>
    				<td>2</td>
    			</tr>
    			<tr>
    				<td>c</td>
    				<td>4</td>
    			</tr>
    			<tr>
    				<td>d</td>
    				<td>1</td>
    			</tr>
    			<tr>
    				<td>É</td>
    				<td>0.1</td>
    			</tr>
    			<tr>
    				<td>e</td>
    				<td>3</td>
    			</tr>
    			<tr>
    				<td>é</td>
    				<td>10</td>
    			</tr>
    			<tr>
    				<td>è</td>
    				<td>1.01</td>
    			</tr>
    		</table>
    		<script type='text/javascript'>
    			function natsortTable(table){
    				var heads,i=-1;
    				table.onclick=function(event){
    					var col=event.target;
    					if(col.tagName=='TH'){
    						var rowSelector=this.rows[0].getElementsByTagName('th')==null?1:0;
    						var cols=this.rows[rowSelector].getElementsByTagName('th'),i=-1,j=0,k,elements=[],temp,node,results=[],current;
    						while(cols[++i]!=col){}
    						while(this.rows[++j]){
    							node=this.rows[j].getElementsByTagName('td')[i];
    							if(!node.hasOwnProperty('encodedValue')){
    								k=-1;
    								node.encodedValue=[];
    								while(node.innerHTML[++k]){
    									node.encodedValue.push(node.innerHTML.charCodeAt(k));
    								}
    							}
    							elements.push(node);
    						}
    						i=0;
    						results[0]=elements[0];
    						while(elements[++i]){
    							j=0;
    							current=elements[i];
    							while(current){
    								k=-1;
    								if(results[j]){
    									if(!isNaN(current.innerHTML)&&!isNaN(results[j].innerHTML)){
    										if(Number(current.innerHTML)<Number(results[j].innerHTML)){
    											temp=results[j]||false;
    											results[j]=current;
    											current=temp;
    										}
    									}
    									else if(current==elements[i]){
    										if(current.encodedValue.length>=results[j].encodedValue.length){
    											if(current.encodedValue.length==results[j].encodedValue.length){
    												while(current==elements[i]&&current.encodedValue[++k]){
    													if(current.encodedValue[k]<results[j].encodedValue[k]){
    														temp=results[j]||false;
    														results[j]=current;
    														current=temp;
    													}
    													else if(current.encodedValue[k]>results[j].encodedValue[k]){
    														k=current.encodedValue.length;
    													}
    												}
    											}
    										}
    									}
    									else{
    										temp=results[j]||false;
    										results[j]=current;
    										current=temp;
    									}
    									j++;
    								}
    								else{
    									results[j]=current;
    									current=false;
    								}
    							}
    						}
    						if(col.ord=='DESC'){
    							col.ord='ASC';
    						}
    						else{
    							col.ord='DESC';
    							results.reverse();
    						}
    						i=-1;
    						node=this.getElementsByTagName('tbody')[0]||this;
    						while(results[++i]){
    							node.appendChild(results[i].parentNode);
    						}
    					}
    				};
    				heads=table.getElementsByTagName('th');
    				while(heads[++i]){
    					heads[i].ord='DESC';
    				}
    			}
    			// Application de natsortTable à un tableau
    			natsortTable(document.getElementById('matable'));
    		</script>
    	</body>
    </html>

  13. #13
    Membre Expert
    Avatar de beegees
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2004
    Messages
    3 448
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : mars 2004
    Messages : 3 448
    Points : 1 198
    Points
    1 198

    Par défaut

    Citation Envoyé par Lcf.vs Voir le message
    Voici ma version, optimisable mais fonctionnelle :

    Code :
    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
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    	<head>
    		<title>Table natsorter</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<style type="text/css">
    			table{
    				border-collapse:collapse;
    			}
    			th{
    				background-color:grey;
    				color:white;
    			}
    			th,td{
    				border:solid 1px black;
    				width :80px;
    			}
    		</style>
    	</head>
    	<body>
    		<table id="matable">
    			<tr>
    				<th>col1</th>
    				<th>col2</th>
    			</tr>
    			<tr>
    				<td>a</td>
    				<td>5</td>
    			</tr>
    			<tr>
    				<td>b</td>
    				<td>2</td>
    			</tr>
    			<tr>
    				<td>c</td>
    				<td>4</td>
    			</tr>
    			<tr>
    				<td>d</td>
    				<td>1</td>
    			</tr>
    			<tr>
    				<td>É</td>
    				<td>0.1</td>
    			</tr>
    			<tr>
    				<td>e</td>
    				<td>3</td>
    			</tr>
    			<tr>
    				<td>é</td>
    				<td>10</td>
    			</tr>
    			<tr>
    				<td>è</td>
    				<td>1.01</td>
    			</tr>
    		</table>
    		<script type='text/javascript'>
    			function natsortTable(table){
    				var heads,i=-1;
    				table.onclick=function(event){
    					var col=event.target;
    					if(col.tagName=='TH'){
    						var cols=this.rows[0].getElementsByTagName('th'),i=-1,j=0,k,elements=[],temp,node,results=[],current;
    						while(cols[++i]!=col){}
    						while(this.rows[++j]){
    							node=this.rows[j].getElementsByTagName('td')[i];
    							if(!node.hasOwnProperty('encodedValue')){
    								k=-1;
    								node.encodedValue=[];
    								while(node.innerHTML[++k]){
    									node.encodedValue.push(node.innerHTML.charCodeAt(k));
    								}
    							}
    							elements.push(node);
    						}
    						i=0;
    						results[0]=elements[0];
    						while(elements[++i]){
    							j=0;
    							current=elements[i];
    							while(current){
    								k=-1;
    								if(results[j]){
    									if(!isNaN(current.innerHTML)&&!isNaN(results[j].innerHTML)){
    										if(Number(current.innerHTML)<Number(results[j].innerHTML)){
    											temp=results[j]||false;
    											results[j]=current;
    											current=temp;
    										}
    									}
    									else if(current==elements[i]){
    										if(current.encodedValue.length>=results[j].encodedValue.length){
    											if(current.encodedValue.length==results[j].encodedValue.length){
    												while(current==elements[i]&&current.encodedValue[++k]){
    													if(current.encodedValue[k]<results[j].encodedValue[k]){
    														temp=results[j]||false;
    														results[j]=current;
    														current=temp;
    													}
    													else if(current.encodedValue[k]>results[j].encodedValue[k]){
    														k=current.encodedValue.length;
    													}
    												}
    											}
    										}
    									}
    									else{
    										temp=results[j]||false;
    										results[j]=current;
    										current=temp;
    									}
    									j++;
    								}
    								else{
    									results[j]=current;
    									current=false;
    								}
    							}
    						}
    						if(col.ord=='DESC'){
    							col.ord='ASC';
    						}
    						else{
    							col.ord='DESC';
    							results.reverse();
    						}
    						i=-1;
    						node=this.getElementsByTagName('tbody')[0]||this;
    						while(results[++i]){
    							node.appendChild(results[i].parentNode);
    						}
    					}
    				};
    				heads=table.getElementsByTagName('th');
    				while(heads[++i]){
    					heads[i].ord='DESC';
    				}
    			}
    			// Application de natsortTable à un tableau
    			natsortTable(document.getElementById('matable'));
    		</script>
    	</body>
    </html>
    Testé, très bon code

  14. #14
    Membre éprouvé

    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2007
    Messages
    403
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : Belgique

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

    Informations forums :
    Inscription : octobre 2007
    Messages : 403
    Points : 469
    Points
    469

    Par défaut

    Encore une petite correction :

    Code :
    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
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    	<head>
    		<title>Table natsorter</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<style type="text/css">
    			table{
    				border-collapse:collapse;
    			}
    			th{
    				background-color:grey;
    				color:white;
    			}
    			th,td{
    				border:solid 1px black;
    				width :80px;
    			}
    		</style>
    	</head>
    	<body>
    		<table id="matable">
    			<tr>
    				<th>col1</th>
    				<th>col2</th>
    			</tr>
    			<tr>
    				<td>a</td>
    				<td>5</td>
    			</tr>
    			<tr>
    				<td>b</td>
    				<td>2</td>
    			</tr>
    			<tr>
    				<td>c</td>
    				<td>4</td>
    			</tr>
    			<tr>
    				<td>d</td>
    				<td>1</td>
    			</tr>
    			<tr>
    				<td>É</td>
    				<td>0.1</td>
    			</tr>
    			<tr>
    				<td>e</td>
    				<td>3</td>
    			</tr>
    			<tr>
    				<td>é</td>
    				<td>10</td>
    			</tr>
    			<tr>
    				<td>è</td>
    				<td>1.01</td>
    			</tr>
    		</table>
    		<script type='text/javascript'>
    			function natsortTable(table){
    				var heads,i=-1;
    				table.onclick=function(event){
    					var col=event.target;
    					if(col.tagName=='TH'){
    						var rowSelector=this.rows[0].getElementsByTagName('th')==null?1:0;
    						var cols=this.rows[rowSelector].getElementsByTagName('th'),i=-1,j=0,k,elements=[],temp,node,results=[],current;
    						while(cols[++i]!=col){}
    						while(this.rows[++j]){
    							node=this.rows[j].getElementsByTagName('td')[i];
    							if(!node.hasOwnProperty('encodedValue')){
    								k=-1;
    								node.encodedValue=[];
    								while(node.innerHTML[++k]){
    									node.encodedValue.push(node.innerHTML.charCodeAt(k));
    								}
    							}
    							elements.push(node);
    						}
    						i=0;
    						results[0]=elements[0];
    						while(elements[++i]){
    							j=0;
    							current=elements[i];
    							while(current){
    								k=-1;
    								if(results[j]){
    									if(!isNaN(current.innerHTML)&&!isNaN(results[j].innerHTML)){
    										if(Number(current.innerHTML)<Number(results[j].innerHTML)){
    											temp=results[j]||false;
    											results[j]=current;
    											current=temp;
    										}
    									}
    									else if(current==elements[i]){
    										if(current.encodedValue.length>=results[j].encodedValue.length){
    											if(current.encodedValue.length==results[j].encodedValue.length){
    												while(current==elements[i]&&current.encodedValue[++k]){
    													if(current.encodedValue[k]<results[j].encodedValue[k]){
    														temp=results[j]||false;
    														results[j]=current;
    														current=temp;
    													}
    													else if(current.encodedValue[k]>results[j].encodedValue[k]){
    														k=current.encodedValue.length;
    													}
    												}
    											}
    										}
    									}
    									else{
    										temp=results[j]||false;
    										results[j]=current;
    										current=temp;
    									}
    									j++;
    								}
    								else{
    									results[j]=current;
    									current=false;
    								}
    							}
    						}
    						if(col.ord=='DESC'){
    							col.ord='ASC';
    						}
    						else{
    							col.ord='DESC';
    							results.reverse();
    						}
    						i=-1;
    						node=this.getElementsByTagName('tbody')[0]||this;
    						while(results[++i]){
    							node.appendChild(results[i].parentNode);
    						}
    					}
    				};
    				i=-1;
    				heads=table.getElementsByTagName('th');
    				while(heads[++i]){
    					heads[i].ord='DESC';
    				}
    			}
    			// Application de natsortTable à un tableau
    			natsortTable(document.getElementById('matable'));
    		</script>
    	</body>
    </html>

  15. #15
    Membre actif
    Inscrit en
    juin 2004
    Messages
    162
    Détails du profil
    Informations forums :
    Inscription : juin 2004
    Messages : 162
    Points : 187
    Points
    187

    Par défaut

    Bonjour,

    On va dire que je cherche la p'tite bête, mais si je peux me permettre, le script est un peu intrusif :
    ...
    table.onclick=function(event){
    ...
    Supposons qu'il y ait déjà un script également intrusif présent sur la page et qui attache une autre fonction à l'évènement "click" de la table, soit le tri ne fonctionne plus, soit c'est l'autre script...

    Je suppose que le but du script était essentiellement le tri, mais tant qu'à le faire, autant faire propre, non ?

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function addEvent(obj,event,fct) {
       if (obj.attachEvent)
          obj.attachEvent('on' + event,fct);
       else obj.addEventListener(event,fct,true);
    }
     
    function removeEvent(obj,event,fct) {
       if (obj.detachEvent)
          obj.detachEvent('on'+event,fct);
       else obj.removeEventListener(event,fct,true);
    }
    ...
    addEvent(table,"click",function(event){
    ...
    et idéalement aussi :
    Code :
    1
    2
    3
    addEvent(window,"load",function(event){
       natsortTable(document.getElementById('matable'));
    }
    A+

  16. #16
    Membre éprouvé

    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2007
    Messages
    403
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : Belgique

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

    Informations forums :
    Inscription : octobre 2007
    Messages : 403
    Points : 469
    Points
    469

    Par défaut

    Oui, en effet, cela résulte du remplacement des éléments liés à ma lib' par du minimaliste, désolé...
    Afin d'obtenir plus facilement de l'aide, n'hésitez pas à poster votre code de carte bancaire

    Mon GitHub - Mon EasyTemplate PHP

  17. #17
    Futur Membre du Club
    Inscrit en
    juillet 2009
    Messages
    182
    Détails du profil
    Informations forums :
    Inscription : juillet 2009
    Messages : 182
    Points : 18
    Points
    18

    Par défaut

    Bonjour,

    J'essaye d'utiliser le code Lcf.vs...

    Je voudrais pouvoir passer à la fonction natsortTable le numéro de colonne à trier :

    Code :
    natsortTable(document.getElementById('matable','2'));
    Comment faire pour arriver à un résultat de trie suivant le numéro de colonne passé en paramètre ?

    Merci

  18. #18
    Membre éprouvé

    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2007
    Messages
    403
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : Belgique

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

    Informations forums :
    Inscription : octobre 2007
    Messages : 403
    Points : 469
    Points
    469

    Par défaut

    Simule le clic sur le th correspondant
    Afin d'obtenir plus facilement de l'aide, n'hésitez pas à poster votre code de carte bancaire

    Mon GitHub - Mon EasyTemplate PHP

  19. #19
    Invité de passage
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2014
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2014
    Messages : 1
    Points : 1
    Points
    1

    Par défaut

    Bonjour, je voudrais savoir si il est possible d'utiliser le code de Lcf.vs uniquement sur un tbody particulier ?
    merci d'avance

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •