On 01/11/2011 14:14, fulio pen wrote :
Hello,
> Back in 2005, some people in this group helped me to create the
> following table for sorting.
>
>
http://www.pinyinology.com/sortable/shuihu/heavenly.html
>
> He or she did a few rows, and I followed suit adding all other rows.
> All columns in the table are for sorting. Now I like to create
> another table of three columns. Only two columns are for sorting. The
> other one is not.
I am not sure about what the original script would do, but isn't this
simply a case of table sorting? I believe that there should be some good
scripts available on the web (with strong design, fine performance,
extended documentation...).
However, being in the mood for a bit of javascript tonight, please find
below a quick attempt addressing your problem. There are two files used:
- the HTML file contains the table (add as many rows as you wish) and a
script configuration (do not edit it),
- the Javascript file contains some utilities, among which the sort part
(do not edit it as well).
Usual caveats apply. I made this relatively quickly (in about one hour),
so this is only slightly tested, not performance-optimized, and probably
not that flexible. Still, it's nice writing some javascript from time to
time :)
HTH,
Elegie.
---
HTML File
---
<!doctype html>
<html>
<head>
<title>names2a</title>
<meta charset='utf-8' />
<style type="text/css">
th {background-color: #aaa;}
tr:nth-child(odd) td {background-color: #ccc;}
tr:nth-child(even) td {background-color: #eee;}
.sortable {text-decoration: underline; cursor:pointer;}
</style>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
// Let us augment our table with a sort behavior
window.onload = (function (evt) {
var target = document.getElementById("tb1");
if (target) {
var headers = target.getElementsByTagName("th");
var headersToSort = [headers[0], headers[2]];
for(var ii=0; ii<headersToSort.length; ii++) {
createSortHandler(
headersToSort[ii],
TableUtil.STRING_INSENSITIVE_ASC_COMPARATOR
);
}
}
function createSortHandler(target, comparator) {
var tbody = DomUtil.findParent(target, "table").tBodies[0];
var cellIndex = target.cellIndex;
if (tbody) {
target.className = "sortable";
target.onclick = (function (evt) {
TableUtil.sort(tbody, cellIndex, comparator);
});
}
}
});
</script>
</head>
<body>
<table id="tb1">
<thead>
<tr>
<th>pin yin</th>
<th>han zi</th>
<th>English</th>
</tr>
</thead>
<tbody>
<tr>
<td>bai<sup>2</sup> mei<sup>3</sup> jing<sup>4</sup></td>
<td>白美静</td>
<td>Bentley Maria</td>
</tr>
<tr>
<td>bai<sup>2</sup> jun<sup>4</sup> xiong<sup>2</sup></td>
<td>白俊雄</td>
<td>Bentley Mike</td>
</tr>
<tr>
<td>bao<sup>1</sup> cheng<sup>2</sup> yi<sup>4</sup></td>
<td>包诚毅</td>
<td>Boole Chris</td>
</tr>
<tr>
<td>gao<sup>1</sup> an<sup>1</sup> di<sup>2</sup></td>
<td>高安迪</td>
<td>Grow Andy</td>
</tr>
</tbody>
</table>
</body>
</html>
---
Javascript file (util.js)
---
var DomUtil = {};
var TableUtil = {};
DomUtil.findParent = (function(element, type) {
if (!element) {
return null;
}
if (element.nodeName.toLowerCase() == type.toLowerCase()) {
return element;
}
return arguments.callee(element.parentNode, type);
});
DomUtil.getText = (function(node) {
if (node.nodeType == 3) {
return node.nodeValue;
} else if (node.nodeType == 1) {
var children = node.childNodes;
var text = "";
for (var ii=0; ii<children.length; ii++) {
text += arguments.callee(children[ii]);
}
return text;
} else {
return "";
}
});
TableUtil.STRING_INSENSITIVE_ASC_COMPARATOR = (function(first, second){
var s1 = first && first.toLowerCase() || "";
var s2 = second && second.toLowerCase() || "";
if (s1<s2) return -1;
if (s1>s2) return +1;
return 0;
});
TableUtil.sort = (function (tbody, columnIndex, comparator){
// main algorithm
var sortableEntities = buildSortableEntityList(tbody, columnIndex);
sortEntityList(sortableEntities, comparator);
reflectSortOnHTML(tbody, sortableEntities);
// helpers
function SortableEntity(text, row) {
this.text = text;
this.row = row;
}
function buildSortableEntityList(tbody, columnIndex) {
var entities=[];
var rows = tbody.rows;
var rowsCount = rows.length;
for(var ii=0; ii<rowsCount; ii++) {
entities.push(
new SortableEntity(
DomUtil.getText(rows[ii].cells[columnIndex]),
rows[ii]
)
);
}
return entities;
}
function sortEntityList(entityList, comparator) {
entityList.sort(
function (first, second) {
return comparator(first.text, second.text);
}
);
}
function reflectSortOnHTML(tbody, sortedEntityList) {
for(var ii=0; ii<sortedEntityList.length; ii++) {
tbody.appendChild(sortedEntityList[ii].row);
}
}
});