Tri en JavaScript

Vous souhaitez trier/réorganiser des éléments de votre page sans passer par une bibliothèque (ex : tablesorter)… Voici un petit exemple utilisant la fonction native bien pratique sort() et jQuery.

I. Création d’une liste désordonnée

(code à placer dans la balise body)

[php]
<div id="conteneur">
<ul class="liste">
<?php
$tableau = range(1, 8);
shuffle($tableau);
foreach ($tableau as $k=>$v) {
echo ‘<li id="li’.$v.’">#li’.$v.’</li>’;
}
?>
</ul>
</div>
<p><input type="button" name="trier1" value="Tri Asc" onclick="tri(‘.liste’, ‘ASC’)" /><input type="button" name="trier1" value="Tri Desc" onclick="tri(‘.liste’, ‘DESC’)" /></p>
[/php]

II. Mise en forme

(code à placer dans la balise head)

[php]
<style type="text/css">
body {font:italic 12px Georgia,Arial;background:#F9F9F9;}
p {text-align:center;}
ul li {border:1px solid #DFDFDF;margin:10px;font-size:160%;color:#D54E21;line-height:1.4em;background-color:#fff;position:relative;}
</style>
[/php]

III. Fonction de tri

(code à placer dans la balise head)

[php]
<script type="text/javascript">
function tri(el, method) {
var ul = $(el);
var li = $(‘>li’, ul);
var r = method == ‘DESC’ ? -1 : 1;
li.sort(function(a, b) {
var item1 = $(a).attr(‘id’);
var item2 = $(b).attr(‘id’);
item1 = parseFloat(item1.substring(2));
item2 = parseFloat(item2.substring(2));
return item1 > item2 ? r : -r;
}).remove().appendTo(ul);
};
</script>
[/php]

III. (bis) Version animée

[php]
<script type="text/javascript">
function tri(el, method) {
var ul = $(el);
var li = $(‘>li’, ul).css({opacity:0.5});
var r = method == ‘DESC’ ? -1 : 1;
var liOffsets = new Array();
var ulOffset = ul.offset();
li.each(function(i, v) {
var liOffset = $(v).offset();
liOffsets[v.id] = liOffset.top – parseFloat($(v).css(‘top’)) – ulOffset.top;
});

li.sort(function(a, b) {
var item1 = $(a).attr(‘id’);
var item2 = $(b).attr(‘id’);
item1 = parseFloat(item1.substring(2));
item2 = parseFloat(item2.substring(2));
return item1 > item2 ? r : -r;
});

li.each(function(i, v) {
var _id = $(‘>li:eq(‘+i+’)', ul).attr(‘id’);
$(v).css({zIndex:i+5}).delay(100*i).animate({opacity:1, top:liOffsets[_id] – liOffsets[v.id]}, 500);
});
};
</script>
[/php]

IV. Démonstration

• tri-javascript.html