Optimiser ma fonction de tri d'un tableau html

**Tchupacabra** · 15/01/2011, 22h21

Bonjour,

J'ai codé une fonction qui me permet de trier un tableau HTML. Elle me semble fonctionnelle mais très lente...

Auriez-vous des conseils pour optimiser mon code ?

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
$('th').toggle(
		function(){
			tri(this.cellIndex, sortDesc);
		},
		function(){
			tri(this.cellIndex, sortAsc);
		}
	)
 
function tri(id, fn) {
	var trs = $('tr');
	var l = trs.length;
	var i, j;
	var tr_a, tr_b;
	var a, b, temp;
	for (i=0; i<=l; i++) {
		tr_a = trs[i];
		a = $('td:eq('+id+')', trs[i]).text();
		for (j=i+1; j<l; j++){
			tr_b = trs[j];
			b = $('td:eq('+id+')', trs[j]).text();
			if ( fn(a, b) ){
				// permutation des lignes a et b
				$(tr_a).insertBefore(tr_b);
				$(tr_b).insertBefore(tr_a);			
			}
		}
	} 
}
function sortAsc(a,b){
   return a<b ;
}
function sortDesc(a,b){
   return a>b ;
}

Merci d'avance !

**SpaceFrog** · 16/01/2011, 10h41

J'ai ceci en stock

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
<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>

tu peux t'en inspirer pour le jqueriser ...
attention toutefois je n'y ai pas intégré le tri numérique

sinon il exite un addon jquey tablesort

**Tchupacabra** · 16/01/2011, 19h47

trop bien !

2/3 ridicules changements... sinon pour mes besoins, pas de plugin et pas de "jQuerysation".
Je passe de 1500ms à 25ms pour le tri d'une colonne sur un tableau de 50 lignes x 7 colonnes !

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
function sortTextAsc(a,b){
	if(a[1] > b[1]) return 1;
	if(a[1] < b[1]) return -1;
	return 0;
}
function sortTextDesc(a,b){
	if(a[1] > b[1]) return -1;
	if(a[1] < b[1]) return 1;
	return 0;
}
function sortNumberAsc(a,b){
	if(parseInt(a[1]) > parseInt(b[1])) return 1;
	if(parseInt(a[1]) < parseInt(b[1])) return -1;
	return 0;
}
function sortNumberDesc(a,b){
	if(parseInt(a[1]) > parseInt(b[1])) return -1;
	if(parseInt(a[1]) < parseInt(b[1])) return 1;
	return 0;
}
function tri(tid, col, fn){
	var mybody = document.getElementById(tid).getElementsByTagName('tbody')[0];
	var lines = mybody.getElementsByTagName('tr');
	var sorter = new Array();
	var i = -1;
	while(lines[++i]){
		sorter.push( [ lines[i], lines[i].getElementsByTagName('td')[col].textContent ] );
	}
	sorter.sort(fn);
	var j=-1;
	while(sorter[++j]){
		mybody.appendChild(sorter[j][0]);
	}
}

Merci SpaceFrog !

**SpaceFrog** · 16/01/2011, 19h57

il y a encore moyen d'augmenter la rapidité si le contenu des td ne change pas, il suffit en effet de renseigner l'array sorter une seule fois au chargement de la page.

**Tchupacabra** · 16/01/2011, 21h40

merci pour le conseil...

Optimiser ma fonction de tri d'un tableau html

jQuery

Vue hybride

Discussions similaires

Partager

Partager