Tri de tableau par ordre numérique et alphanumérique

**tompablo** · 01/11/2019, 12h33

Bonjour,

J'ai recherché sur le forum avant de poster mais j'ai eu un peu de mal à comprendre donc j'ai ouvert cette nouvelle discussion. J'aimerais donc rendre mon tableau triable par ordre numérique et alphanumérique en cliquant sur les en-têtes des colonnes un peu comme ça :

https://dmouronval.developpez.com/triable/
https://www.developpez.net/forums/d7...html-triables/

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
<!DOCTYPE html>
<html>
    <head>
        <title>Table</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" type="text/css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
    </head>
    <body>
        <table>
            <thead>
                <tr class="row-1 odd">
	        <th class="column-1" style="width:100px;">ID</th>
                <th class="column-2" style="width:100px;">Name</th>
                <th class="column-3" style="width:100px;">Type</th>
                </tr>
            </thead>
            <tbody class="row-hover">
                <tr class="row-2 even">
	        <td class="column-1">14</td>
                <td class="column-2">Bart</td>
                <td class="column-3">4</td>
                </tr>
 
                <tr class="row-3 odd">
	        <td class="column-1">22</td>
                <td class="column-2">Tommy</td>
                <td class="column-3">8</td>
                </tr>
 
                <tr class="row-4 even">
	        <td class="column-1">37</td>
                <td class="column-2">Shawn</td>
                <td class="column-3">11</td>
                </tr>
            </tbody>   
        </table>
    </body> 
</html>