Πως προσθετουμε το χαρακτηριστικο sorting στα δεδομενα ενος στατικου html πινακα.
Αν σε μια απλη στατικη σελιδα που περιεχει δεδομενα σε μορφη πινακα θελησουμε να προσθεσουμε το χαρακτηριστικο του sorting αυτο γινεται πολυ ευκολα μεσω μιας απλης javascript library που μπορειτε να βρειτε εδω. Σκεφθειτε μια παλια σελιδα ενος πελατη , που την ανανεωνει μια φορα στο τοσο και μαλιστα μονο πχ στατιστικα δεδομενα ή αποτελεσματα της επιχειρησης. Χρηματα δεν υπαρχουν στην αγορα οποτε αλλαγη πλατφορμας και αναβαθμιση μαλλον δεν θα υπαρξει. Οι server-side τεχνικες φιλτραρισματος που ειχατε στο νου σας δεν θα υλοποιηθουν. Αν προτιματε αντι για javascript library να χρησιμοποιησετε jQuery δεν υπαρχει καποιο προβλημα. Η επιλογη ειναι δικη σας. Εμενα μου αρεσει η Sorttable απο το site kryogenix. Ειναι πολυ απλη στη χρηση, αφου το μονο που χρειαζεται να κανουμε ειναι να προσθεσουμε την βιβλιοθηκη στην αρχη της σελιδας , υστερα φτιαχνουμε μια css κλαση και την προσθετουμε στο table tag. Αυτο ηταν. Job done!
<html>
<head><title>Client side table sorting. xDev.gr</title></head>
<script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<style>
table.sortable thead {
background-color:#eee;
color:#666666;
font-weight: bold;
cursor: default;
}
</style>
<body>
<table cellspacing="1" class="sortable">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>jan 12, 2003 11:14 am</td>
</tr>
</tbody>
</table>
</body>
</html>
Παρακατω μπορειτε να κατεβασε τον κωδικα ή αν θελετε μπορειτε να δειτε ενα demo εδω.