What about the idea of giving the user power of sorting the table's column using JavaScript. User can sort any column of the table.
I saw this facility from a software I was using. It was running very fast and smoothly. That web app was using JavaScript from another site. So I though it will be a good idea checking this JavaScript code. I checked and posted it here.
I have mentioned a link to the original source also.
JavaScript Table- Sorting Working Example:
Position Jun 07 | Position Jun 06 | Porg. Language |
---|---|---|
1 | 1 | Java |
2 | 2 | C |
3 | 3 | C++ |
4 | 4 | VB |
5 | 5 | PHP |
Javascript Table Sorting Code:
<script type="text/javascript">
var sortedOn = 0;
function SortTable(sortOn) {
var table = document.getElementById('results');
var tbody = table.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr');
var rowArray = new Array();
for (var i=0, length=rows.length; i<length; i++) {
rowArray[i] = new Object;
rowArray[i].oldIndex = i;
rowArray[i].value = rows[i].getElementsByTagName('td')[sortOn].firstChild.nodeValue;
}
if (sortOn == sortedOn) { rowArray.reverse(); }
else {
sortedOn = sortOn;
/*
Decide which function to use from the three:RowCompareNumbers,
RowCompareDollars or RowCompare (default).
For first column, I needed numeric comparison.
*/
if (sortedOn == 0) {
rowArray.sort(RowCompareNumbers);
}
else {
rowArray.sort(RowCompare);
}
}
var newTbody = document.createElement('tbody');
for (var i=0, length=rowArray.length ; i<length; i++) {
newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true));
}
table.replaceChild(newTbody, tbody);
}
function RowCompare(a, b) {
var aVal = a.value;
var bVal = b.value;
return (aVal == bVal ? 0 : (aVal > bVal ? 1 : -1));
}
// Compare number
function RowCompareNumbers(a, b) {
var aVal = parseInt( a.value);
var bVal = parseInt(b.value);
return (aVal - bVal);
}
// compare currency
function RowCompareDollars(a, b) {
var aVal = parseFloat(a.value.substr(1));
var bVal = parseFloat(b.value.substr(1));
return (aVal - bVal);
}
</script>
HTML Code:
Here is the html code I have used in table sorting example.
This script does not use server-side script, so no page refresh for sorting data in ascending or descending order. It also maintain row data while sorting column.
You may have find this table sorting script very cool! Digg it?
Reference: Table Sorting by Porter Glendinning
# 1 - by Ganesh Chiluveru
it is very nice and simple to use. thank you very much.
bye
ganesh ch
# 2 - by Ganesh Chiluveru
it is very nice and simple to use. thank you very much. byeganesh ch
# 3 - by praful
It is very simple.Thank you very much
# 4 - by praful
It is very simple.Thank you very much
# 5 - by Hendry Agung
i'm new to blog,i want to use this script, how to put this script in bloger post ?