Sorteren op eigenschappen van objecten (Javascript)
03-02-2010
De prestatie van een web applicatie kan behoorlijk verbeterd worden door het sorteren van informatie client side binnen de browser uit te voeren.
In dit voorbeeld wordt de constructor 'person' aangemaakt met de attributen 'FirstName', 'LastName' en 'Age'.
De javascript sort functie wordt vervolgens gebruikt om de personen (het people array met objecten) op leeftijd te sorteren.
Let op dat numeriek sorteren en het sorteren op een string iets anders werkt. Bekijk daarvoor het verschil tussen de functie sortByAge en sortByFirstName.
Een werkend voorbeeld:
<script type="text/javascript">
<!--
// defineer personen
var people = new Array();
people[people.length++] = new person("Tina", "Kroeg", 24);
people[people.length++] = new person("Corie C.", "Hefelcruim", 20);
people[people.length++] = new person("Ernie", "Schijnepesens", 27);
people[people.length++] = new person("Aridun", "Ringoor", 27);
// sorteer op leeftijd
people.sort(sortByAge);
//sorteer op voornaam
// people.sort(sortByFirstName);
// sorteer op achternaam
//people.sort(sortByLastName);
// toon de gebruikers volgens nieuwe sortering
for(i=0;i<people.length;i++){
alert(people[i].FirstName + " " + people[i].LastName + " ("+people[i].Age+")");
}
// structuur van het object persoon
function person(firstName, lastName, age) {
this.FirstName = firstName;
this.LastName = lastName;
this.Age = parseInt(parseFloat(age));
}
// sorteer functies
function sortByAge(a,b){
x = parseInt(a.Age);
y = parseInt(b.Age);
return x - y;}
function sortByFirstName(a, b) {
var x = a.FirstName.toLowerCase();
var y = b.FirstName.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
function sortByLastName(a, b) {
var x = a.LastName.toLowerCase();
var y = b.LastName.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
// -->
</script>
| < | Kolommen van tabel sorteren HTML/javascript | Rekenen met data in javascript | > |
Zie ook:
twing!
zoeken
zoek
dagtip
populair
Gratis iconen
Vergelijk bestanden met WinMerge
Gratis geluid samples
Handleiding VBscript/vbs
JpGraph: Grafieken maken met PHP
HTML formulieren generator
Postcode database Nederland
Stock.XCHNG; Gratis stockfoto's
Internet Explorer op Mac OS installeren
TheIconLab; Iconen downloaden
blog
links
permalink© 2005-2010, Twing IT, Rotterdam