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.
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
ointer;}
  </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);
   }
  }
});
