js 对table表格排序

对于table表格排序，是开发中很长用到得技术。今天把客户端排序完善了一下，它兼容数字、字符、日期、汉字、百分数等排序功能。

如下

对于数字类型列：

	整型onclick=sortTable('tableID',1,'int');

	浮点型onclick=sortTable('tableID',1,'int');

对于日期型列：

	onclick=sortTable('tableID',1,'date');

对于字符串型列：

	如：onclick=sortTable('tableID',1);

对于百分数的列（如：36%）：

	如：sortTable('tableID',5,'float',1);



// 对table表格排序的处理TableSort.js 文件代码如下：

//ie和FireFox的处理

function ieOrFireFox(obj)

{

    if(obj.textContent != null)

    {

        return obj.textContent;

    }

    else

    {

        var s = obj.innerText;

        return s.substring(0,s.length);

     }

}

//对table排序。

//参数 ---tableId:表的id，iCol:列索引；dataType:iCol对应的列排序显示数据的类型，removeRight:排序时去掉列的右边的字符个数

function sortTable(tableId,iCol,dataType,removeRight)

{

    var table = document.getElementById(tableId);

    //给排序列标题改变颜色////////////////////

    var thead = table.childNodes[0];

    var tr = thead.childNodes[0];

    var thNew = tr.childNodes[iCol];

    if(table.sortCol != null)

    {

        var thOld = tr.childNodes[table.sortCol];

        thOld.style.color="Black"

    }

    thNew.style.color="Blue"

    ///////////////////////////////////////////

    var tbody = table.tBodies[0];

    var colRows = tbody.rows;

    var aTrs = new Array;//定义数组

    //将得到的列放入数组，备用

    for(var i = 0;i<colRows.length;i++)

    {

        aTrs[i] = colRows[i];

    }

    //判断上一次排列和现在需要排列的是否同一个

    if(table.sortCol == iCol)

    {

        aTrs.reverse();

    }

    else

    {   //如果不是同一列，使用sort方法传进排序函数

        aTrs.sort(compareEle(iCol,dataType,removeRight));

    }

    var oFragment = document.createDocumentFragment();

    for(var i =0;i<aTrs.length;i++)

    {

        oFragment.appendChild(aTrs[i]);

    }

    tbody.appendChild(oFragment);

    table.sortCol = iCol;//记录最后一次排序的列索引

}

//排序函数，iCol：列索引，dataType:列数据类型

function compareEle(iCol,dataType,removeRight)

{

    return function(oTR1,oTR2)

    {

        var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]),dataType,removeRight);

        var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]),dataType,removeRight);

        if(typeof(vValue1)=='string')

        { // 汉字排序单独处理

            return vValue1.localeCompare(vValue2);

        }

        else

        {

            if(vValue1<vValue2)

            {

                return -1;

            }

            else if(vValue1>vValue2)

            {

                return 1;

            }

            else

            {

                return 0;

            }

         }

    };

}

//将列的类型转换成相应的可以排序的数据类型

function convert(sValue,dataType,removeRight)

{

    if(removeRight!=null)

    {

        var newLen = sValue.length - removeRight;

        sValue=sValue.substr(0,newLen);

    }

    switch(dataType)

    {

        case "int":

            return parseInt(sValue);

        case "float":

            return parseFloat(sValue);

        case "date":

            return new Date(Date.parse(sValue));

        default:

            return sValue.toString();

    }

}