日期:2014-05-16  浏览次数:20473 次

JS:表格排序
参考资料
js的table排序,支持多浏览器,多列同时排序,自定义排序
http://loven-11.iteye.com/blog/649709
js操作table元素,表格的行列新增、删除汇集
http://loven-11.iteye.com/blog/649302
js对table排序(类似点击Excel表头排序)<要通过CSDN下载>
http://www.cnblogs.com/nlx0201/archive/2010/10/22/1908134.html
具备排序功能的表格(JS+CSS+table)<这个不错,就是页面太复杂了 >
http://www.51xuediannao.com/JS/texiao/table_orde.html?q1=%E8%BF%98%E5%8E%9F
sorttable官网及示例<这个相当漂亮 >
http://www.kryogenix.org/code/browser/sorttable/
其它阅读
js table操作--------table滚动条
http://www.blogjava.net/lcs/archive/2007/11/29/164046.html
Sortable Table 可排序表格JS收集<各种插件实现的排序效果>
http://www.originalcolors.cn/work/sortable-table-js-collection.html

以下是sorttable官网的参考代码:
注意事项:排序字段一定要放在<thead></thead>标签之间,排序的数据一定要放在<tbody></tbody>标签之间,否则不能实现排序
示例代码
style.css
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}

test.html
<table class="sortable">
<thead>
  <tr><th>Person</th><th>Monthly pay</th></tr>
</thead>
<tbody>
  <tr><td>Jan Molby</td><td>£12,000</td></tr>
  <tr><td>Steve Nicol</td><td>£8,500</td></tr>
  <tr><td>Steve McMahon</td><td>£9,200</td></tr>
  <tr><td>John Barnes</td><td>£15,300</td></tr>
</tbody>
<tfoot>
  <tr><td>TOTAL</td><td>£45,000</td></tr>
</tfoot>
</table>

sorttable.js
/*
  SortTable
  version 2
  7th April 2007
  Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/
  
  Instructions:
  Download this file
  Add <script src="sorttable.js"></script> to your HTML
  Add class="sortable" to any table you'd like to make sortable
  Click on the headers to sort
  
  Thanks to many, many people for contributions and suggestions.
  Licenced as X11: http://www.kryogenix.org/code/browser/licence.html
  This basically means: do what you want with it.
*/

 
var stIsIE = /*@cc_on!@*/false;

sorttable = {
  init: function() {
    // quit if this function has already been called
    if (arguments.callee.done) return;
    // flag this function so we don't do the same thing twice
    arguments.callee.done = true;
    // kill the timer
    if (_timer) clearInterval(_timer);
    
    if (!document.createElement || !document.getElementsByTagName) return;
    
    sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
    
    forEach(document.getElementsByTagName('table'), function(table) {
      if (table.className.search(/\bsortable\b/) != -1) {
        sorttable.makeSortable(table);
      }
    });
    
  },
  
  makeSortable: function(table) {
    if (table.getElementsByTagName('thead').length == 0) {
      // table doesn't have a tHead. Since it should have, create one and
      // put the first table row in it.
      the = document.createElement('thead');
      the.appendChild(table.rows[0]);
      table.insertBefore(the,table.firstChild);
    }
    // Safari doesn't support table.tHead, sigh
    if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0];
    
    if (table.tHead.rows.length != 1) return; // can't cope with two header rows
    
    // Sorttable v1 put rows with a class of "sortbottom" at the bottom (as
    // "total" rows, for example). This is B&R, since what you're supposed
    // to do is put them in a tfoot. So, if there are sortbottom rows,
    // for backwards compatibility, move them to tfoot (creating it if