js表头排序实现方法

本文实例讲述了js表头排序实现方法。分享给大家供大家参考。

具体实现方法如下：

<script type="text/javascript">

    //是否递减排序

    var isDescending = true;

    /*****************************************

    * 要排序的行必须放到<tbody></tbody>标签中

    * tableId:排序表格ID

    * colNo：排序的列号，即第几列，从0开始

    * startRowNo：排序的开始行号，从0开始

    * sortLength：要排序的行数，

    * type：排序列的类型

    */

    function sort(tableId, colNo ,startRowNo, sortLength, type)

    {

        //如果要排序的行数是1或是0，则不对其进行排序操作

        if(sortLength<=1){

            return;

        }

        var currTable = document.getElementById(tableId);

        var theHeader = currTable.outerHTML.substring(0, currTable.outerHTML.indexOf('<TBODY>')+7)

        var theFooter = currTable.outerHTML.substring(currTable.outerHTML.indexOf('</TBODY>')-8);

        //这里的行数是去掉表头表头行和表位行的行数

        var theRows = new Array(sortLength);

        //对表中的数据进行循环

        for(i=startRowNo; i<sortLength+startRowNo; i++)

        {

            theRows[i-startRowNo] = new Array(currTable.rows[i].cells[colNo].innerText.toLowerCase(), currTable.rows[i].outerHTML);

        }

        if(type.toUpperCase()=='NUMBER')

        {

            theRows.sort(compareNumber);

        }

        else if(type.toUpperCase()=='DATE')

            theRows.sort(compareDate);

        else if(type.toUpperCase()=='STRING')

            theRows.sort(compareString);

        var tableInfo=''

        for(j=0; j<theRows.length; j++)

        {

            tableInfo+=theRows[j][1];

        }

        isDescending = !isDescending;

        currTable.outerHTML= theHeader + tableInfo +theFooter;

        return ;

    }

    //对数字进行比较

    function compareNumber(x, y)

    {

        //对货币格式的数据进行转化

        a = x[0].excludeChars(",").trim();

        b = y[0].excludeChars(",").trim();

 

        if(a==""){a=0;}

        if(b==""){b=0;}

            if(isDescending)

            {

                return parseFloat(b) - parseFloat(a);

            }

            else

            {

                return parseFloat(a) - parseFloat(b);

            }

    }

    //对字符串进行比较

    function compareString(x, y)

    {

            if(isDescending)

            {

                if(x[0]>y[0]) return -1;

                else if(x[0]<y[0]) return 1;

                else return 0;

            }

            else

            {

                if(x[0]<y[0]) return -1;

                else if(x[0]>y[0]) return 1;

                else return 0;

            }

    }

    //对时间进行比较

    function compareDate(x,y){

        var arr=x[0].split("-"); 

        var starttime=new Date(arr[0],arr[1],arr[2]); 

        var starttimes=starttime.getTime(); 

        var arrs=y[0].split("-"); 

        var lktime=new Date(arrs[0],arrs[1],arrs[2]); 

        var lktimes=lktime.getTime();

         

        if(isDescending)

        {

            return lktimes - starttimes;

        }

        else

        {

            return starttimes - lktimes;

        }

    }

    //去除字符串中所有指定的字符串

    String.prototype.excludeChars = function(chars){

         var matching = new RegExp(chars , "g") ;

         return this.replace(matching , '') ;

    }

</script>

希望本文所述对大家的javascript程序设计有所帮助。