一实用的实现table排序的Javascript类库


Posted in Javascript onSeptember 12, 2007

 一个Javascript 的类库,用于table内容排序。使用很方便,不用每次都去调用数据库了。
特别适合多表查询的排序。加上<tbody>的style.display 切换,也可以实现分页。
效果演示
用法:
1.添加JS
<SCRIPT src="sorttable.js" type="text/javascript"></SCRIPT>
2.添加TABLE,注意的是:一定要有ID,class为"sortable"
<table class="sortable" id="mytable">
OK,可以了,简单的吧
如果觉得太单调,自己加点CSS吧,官方给出了改HEAD的CSS

/* Sortable tables */
table.sortable a.sortheader {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    text-decoration: none;
    display: block;
}
table.sortable span.sortarrow {
    color:black;
    text-decoration: none;
}

addEvent(window, "load", sortables_init);var SORT_COLUMN_INDEX;
function sortables_init() {
    // Find all tables with class sortable and make them sortable
    if (!document.getElementsByTagName) return;
    tbls = document.getElementsByTagName("table");
    for (ti=0;ti<tbls.length;ti++) {
        thisTbl = tbls[ti];
        if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
            //initTable(thisTbl.id);
            ts_makeSortable(thisTbl);
        }
    }
}
function ts_makeSortable(table) {
    if (table.rows && table.rows.length > 0) {
        var firstRow = table.rows[0];
    }
    if (!firstRow) return;
    // We have a first row: assume it's the header, and make its contents clickable links
    for (var i=0;i<firstRow.cells.length;i++) {
        var cell = firstRow.cells[i];
        var txt = ts_getInnerText(cell);
        cell.innerHTML = '<a href="#" class="sortheader" '+ 
        'onclick="ts_resortTable(this, '+i+');return false;">' + 
        txt+'<span class="sortarrow">   </span></a>';
    }
}
function ts_getInnerText(el) {
    if (typeof el == "string") return el;
    if (typeof el == "undefined") { return el };
    if (el.innerText) return el.innerText;    //Not needed but it is faster
    var str = "";
    var cs = el.childNodes;
    var l = cs.length;
    for (var i = 0; i < l; i++) {
        switch (cs[i].nodeType) {
            case 1: //ELEMENT_NODE
                str += ts_getInnerText(cs[i]);
                break;
            case 3:    //TEXT_NODE
                str += cs[i].nodeValue;
                break;
        }
    }
    return str;
}
function ts_resortTable(lnk,clid) {
    // get the span
    var span;
    for (var ci=0;ci<lnk.childNodes.length;ci++) {
        if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
    }
    var spantext = ts_getInnerText(span);
    var td = lnk.parentNode;
    var column = clid || td.cellIndex;
    var table = getParent(td,'TABLE');
    // Work out a type for the column
    if (table.rows.length <= 1) return;
    var itm = ts_getInnerText(table.rows[1].cells[column]);
    sortfn = ts_sort_caseinsensitive;
    if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
    if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
    if (itm.match(/^[?]/)) sortfn = ts_sort_currency;
    if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
    SORT_COLUMN_INDEX = column;
    var firstRow = new Array();
    var newRows = new Array();
    for (i=0;i<table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; }
    for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; }
    newRows.sort(sortfn);
    if (span.getAttribute("sortdir") == 'down') {
        ARROW = '  ↑';
        newRows.reverse();
        span.setAttribute('sortdir','up');
    } else {
        ARROW = '  ↓';
        span.setAttribute('sortdir','down');
    }
    // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
    // don't do sortbottom rows
    for (i=0;i<newRows.length;i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);}
    // do sortbottom rows only
    for (i=0;i<newRows.length;i++) { if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);}
    // Delete any other arrows there may be showing
    var allspans = document.getElementsByTagName("span");
    for (var ci=0;ci<allspans.length;ci++) {
        if (allspans[ci].className == 'sortarrow') {
            if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
                allspans[ci].innerHTML = '   ';
            }
        }
    }
    span.innerHTML = ARROW;
}
function getParent(el, pTagName) {
    if (el == null) return null;
    else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())    // Gecko bug, supposed to be uppercase
        return el;
    else
        return getParent(el.parentNode, pTagName);
}
function ts_sort_date(a,b) {
    // y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
    if (aa.length == 10) {
        dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
    } else {
        yr = aa.substr(6,2);
        if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
        dt1 = yr+aa.substr(3,2)+aa.substr(0,2);
    }
    if (bb.length == 10) {
        dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
    } else {
        yr = bb.substr(6,2);
        if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
        dt2 = yr+bb.substr(3,2)+bb.substr(0,2);
    }
    if (dt1==dt2) return 0;
    if (dt1<dt2) return -1;
    return 1;
}
function ts_sort_currency(a,b) { 
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
    return parseFloat(aa) - parseFloat(bb);
}
function ts_sort_numeric(a,b) { 
    aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
    if (isNaN(aa)) aa = 0;
    bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX])); 
    if (isNaN(bb)) bb = 0;
    return aa-bb;
}
function ts_sort_caseinsensitive(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
    if (aa==bb) return 0;
    if (aa<bb) return -1;
    return 1;
}
function ts_sort_default(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
    if (aa==bb) return 0;
    if (aa<bb) return -1;
    return 1;
}

function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be removed");
  }
} 
Javascript 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
js arguments.callee的应用代码
May 07 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
JavaScript数组操作详解
Feb 04 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
JS类定义原型方法的两种实现的区别评论很多
Sep 12 #Javascript
js类中获取外部函数名的方法与代码
Sep 12 #Javascript
javascript下过滤数组重复值的代码
Sep 10 #Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 #Javascript
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 #Javascript
IE不出现Flash激活框的小发现的js实现方法
Sep 07 #Javascript
用javascript实现画板的代码
Sep 05 #Javascript
You might like
星际原理概述
2020/03/04 星际争霸
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
解析Python中while true的使用
2015/10/13 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python import与from import使用及区别介绍
2018/09/06 Python
对python的输出和输出格式详解
2018/12/08 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python通过实例讲解反射机制
2019/10/17 Python
简单介绍django提供的加密算法
2019/12/18 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
学习保证书
2015/01/17 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python