Re: sorting columns

From	fulio pen <fuliopen@yahoo.com>
Newsgroups	comp.lang.javascript
Subject	Re: sorting columns
Date	2011-11-02 05:07 -0700
Organization	http://groups.google.com
Message-ID	<0878d6aa-6869-4b4b-a7e9-e77321b989da@h5g2000vbf.googlegroups.com> (permalink)
References	<f7fca7c8-769a-4339-ae49-bda395338ef3@l12g2000vby.googlegroups.com> <4eb045f2$0$24951$426a74cc@news.free.fr>

Show all headers | View raw

On Nov 1, 3:18 pm, Elegie <ele...@anonymous.invalid> wrote:
> 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);
>      }
>    }
>
>
>
>
>
>
>
> });
Hello, Elegie:

Thanks a lot. Yes, this is just a case of simple table sorting. I am
deeply moved by your help. The Chinese characters and pinyin must not
be easy, if you are a non-native speaker of the Chinese language. I've
saved the code to separate files, and will study and test it
carefully.  Thanks again.

fulio pen

Thread

sorting columns fulio pen <fuliopen@yahoo.com> - 2011-11-01 06:14 -0700
  Re: sorting columns Elegie <elegie@anonymous.invalid> - 2011-11-01 20:18 +0100
    Re: sorting columns fulio pen <fuliopen@yahoo.com> - 2011-11-02 05:07 -0700
      Re: sorting columns Elegie <elegie@anonymous.invalid> - 2011-11-02 13:46 +0100
        Re: sorting columns fulio pen <fuliopen@yahoo.com> - 2011-11-02 07:39 -0700
          Re: sorting columns Elegie <elegie@anonymous.invalid> - 2011-11-02 16:00 +0100
            Re: sorting columns fulio pen <fuliopen@yahoo.com> - 2011-11-02 11:06 -0700
  Re: sorting columns Dr J R Stockton <reply1144@merlyn.demon.co.uk> - 2011-11-02 19:02 +0000
    Re: sorting columns Elegie <elegie@anonymous.invalid> - 2011-11-03 02:27 +0100
    Re: sorting columns Andreas Bergmaier <andber93@web.de> - 2011-11-03 20:06 +0100
      Re: sorting columns Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-03 20:41 +0100
        Re: sorting columns Dr J R Stockton <reply1144@merlyn.demon.co.uk> - 2011-11-04 21:12 +0000
      Re: sorting columns Dr J R Stockton <reply1144@merlyn.demon.co.uk> - 2011-11-04 21:00 +0000
  Re: sorting columns Dr J R Stockton <reply1144@merlyn.demon.co.uk> - 2011-11-03 21:03 +0000

csiph-web