表格排序的实现

最新推荐文章于 2023-09-17 12:33:30 发布

YanniZhang的博客

最新推荐文章于 2023-09-17 12:33:30 发布

阅读量843

点赞数

分类专栏： javascript 文章标签：表格排序

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

下面两段代码都可以实现表格排序。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        .tbl-list, .tbl-list td, .tbl-list th {
            border: solid 1px #000;
            border-collapse: collapse;
            padding: 10px;
            margin: 15px;
        }
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <title>table sort</title>
    <script type="text/javascript">
        //排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型
        function sortAble(th, tableId, iCol, dataType) {

            var ascChar = "▲";
            var descChar = "▼";

            var table = document.getElementById(tableId);

            //排序标题加背景色
            for (var t = 0; t < table.tHead.rows[0].cells.length; t++) {
                var th = $(table.tHead.rows[0].cells[t]);
                var thText = th.html().replace(ascChar, "").replace(descChar, "");
                if (t == iCol) {
                    th.css("background-color", "#ccc");
                }
                else {
                    th.css("background-color", "#fff");
                    th.html(thText);
                }

            }

            var tbody = table.tBodies[0];
            var colRows = tbody.rows;
            var aTrs = new Array;

            //将得到的行放入数组，备用
            for (var i = 0; i < colRows.length; i++) {
                //注：如果要求“分组明细不参与排序”，把下面的注释去掉即可
                //if ($(colRows[i]).attr("group") != undefined) {
                aTrs.push(colRows[i]);
                //}
            }


            //判断上一次排列的列和现在需要排列的是否同一个。
            var thCol = $(table.tHead.rows[0].cells[iCol]);
            if (table.sortCol == iCol) {
                aTrs.reverse();
            } else {
                //如果不是同一列，使用数组的sort方法，传进排序函数
                aTrs.sort(compareEle(iCol, dataType));
            }

            var oFragment = document.createDocumentFragment();
            for (var i = 0; i < aTrs.length; i++) {
                oFragment.appendChild(aTrs[i]);
            }
            tbody.appendChild(oFragment);

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

            //给排序标题加“升序、降序” 小图标显示
            var th = $(table.tHead.rows[0].cells[iCol]);
            if (th.html().indexOf(ascChar) == -1 && th.html().indexOf(descChar) == -1) {
                th.html(th.html() + ascChar);
            }
            else if (th.html().indexOf(ascChar) != -1) {
                th.html(th.html().replace(ascChar, descChar));
            }
            else if (th.html().indexOf(descChar) != -1) {
                th.html(th.html().replace(descChar, ascChar));
            }

            //重新整理分组
            var subRows = $("#" + tableId + " tr[parent]");
            for (var t = subRows.length - 1; t >= 0 ; t--) {
                var parent = $("#" + tableId + " tr[group='" + $(subRows[t]).attr("parent") + "']");
                parent.after($(subRows[t]));
            }
        }

        //将列的类型转化成相应的可以排列的数据类型
        function convert(sValue, dataType) {
            switch (dataType) {
                case "int":
                    return parseInt(sValue, 10);
                case "float":
                    return parseFloat(sValue);
                case "date":
                    return new Date(Date.parse(sValue));
                case "string":
                default:
                    return sValue.toString();
            }
        }

        //排序函数，iCol表示列索引，dataType表示该列的数据类型
        function compareEle(iCol, dataType) {
            return function (oTR1, oTR2) {

                var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()), dataType);
                var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()), dataType);
                if (vValue1 < vValue2) {
                    return -1;
                }
                else {
                    return 1;
                }

            };
        }

        //去掉html标签
        function removeHtmlTag(html) {
            return html.replace(/<[^>]+>/g, "");
        }


        //jQuery加载完以后，分组行高亮背景，分组明细隐藏
        $(document).ready(function () {
            $("tr[group]").css("background-color", "#ff9");
            $("tr[parent]").hide();
        });


        //点击分组行时，切换分组明细的显示/隐藏
        function showSub(a) {
            var groupValue = $(a).parent().parent().attr("group");
            var subDetails = $("tr[parent='" + groupValue + "']");
            subDetails.toggle();
        }


    </script>
</head>

<body>

<table id="tableId" class="tbl-list" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th>序号</th>
        <th οnclick="sortAble(this,'tableId', 1,'string')"
            style="cursor:pointer">姓名</th>
        <th οnclick="sortAble(this,'tableId', 2, 'date')"
            style="cursor:pointer">生日</th>
        <th οnclick="sortAble(this,'tableId', 3, 'int')"
            style="cursor:pointer">年龄</th>
        <th οnclick="sortAble(this,'tableId', 4, 'float')"
            style="cursor:pointer">工资</th>
    </tr>
    </thead>
    <tbody>
    <tr group="A">
        <td>1</td>
        <td><a href="#" οnclick="showSub(this)">Group-A</a></td>
        <td>01/12/1982</td>
        <td>25</td>
        <td>1000.50</td>
    </tr>
    <tr parent="A">
        <td>2</td>
        <td>A-01</td>
        <td>01/09/1982</td>
        <td>25</td>
        <td>2000.10</td>
    </tr>
    <tr parent="A">
        <td>3</td>
        <td>A-02</td>
        <td>01/10/1982</td>
        <td>26</td>
        <td>2000.20</td>
    </tr>
    <tr group="B">
        <td>4</td>
        <td><a href="#" οnclick="showSub(this)">Group-B</a></td>
        <td>10/14/1999</td>
        <td>18</td>
        <td>1000.20</td>
    </tr>
    <tr parent="B">
        <td>5</td>
        <td>B-01</td>
        <td>02/12/1982</td>
        <td>19</td>
        <td>3000.20</td>
    </tr>
    <tr parent="B">
        <td>6</td>
        <td>B-02</td>
        <td>03/12/1982</td>
        <td>20</td>
        <td>3000.30</td>
    </tr>
    <tr group="C">
        <td>7</td>
        <td><a href="#" οnclick="showSub(this)">Group-C</a></td>
        <td>10/14/1980</td>
        <td>8</td>
        <td>1000.30</td>
    </tr>
    <tr parent="C">
        <td>8</td>
        <td>C-01</td>
        <td>03/12/1981</td>
        <td>17</td>
        <td>3100.30</td>
    </tr>
    </tbody>
</table>
</body>
</html>

效果如下：

点击表头，可进行以某一列为标准的升序与降序

下面的代码也可以实现表格排序：

<!DOCTYPE HTML>
<html>
<head>
    <title> 表格排序 </title>
    <meta charset="utf-8">
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="tschengbin">
    <meta name="Keywords" content="jquery tableSort">
    <meta name="Description" content="">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
        div{
            width: 1024px;
            margin: 0 auto;/*div相对屏幕左右居中*/
        }
        table{
            border: solid 1px #666;
            border-collapse: collapse;
            width: 100%;
            cursor: default;
        }
        tr{
            border: solid 1px #666;
            height: 30px;
        }
        table thead tr{
            background-color: #ccc;
        }
        td{
            border: solid 1px #666;
        }
        th{
            border: solid 1px #666;
            text-align: center;
            cursor: pointer;
        }
        .sequence{
            text-align: center;
        }
        .hover{
            background-color: #3399FF;
        }
    </style>
</head>
<body>
<div>
    <table id="tableSort">
        <thead>
        <tr>
            <th type="number">序号</th>
            <th type="string">书名</th>
            <th type="number">价格（元）</th>
            <th type="string">出版时间</th>
            <th type="number">印刷量（册）</th>
            <th type="ip">IP</th>
        </tr>
        </thead>
        <tbody>
        <tr class="hover">
            <td class="sequence">1</td>
            <td>狼图腾</td>
            <td>29.80</td>
            <td>2009-10</td>
            <td>50000</td>
            <td>192.168.1.125</td>
        </tr>
        <tr>
            <td class="sequence">2</td>
            <td>孝心不能等待</td>
            <td>29.80</td>
            <td>2009-09</td>
            <td>800</td>
            <td>192.68.1.125</td>
        </tr>
        <tr>
            <td class="sequence">3</td>
            <td>藏地密码2</td>
            <td>28.00</td>
            <td>2008-10</td>
            <td></td>
            <td>192.102.0.12</td>
        </tr>
        <tr>
            <td class="sequence">4</td>
            <td>藏地密码1</td>
            <td>24.80</td>
            <td>2008-10</td>
            <td></td>
            <td>215.34.126.10</td>
        </tr>
        <tr>
            <td class="sequence">5</td>
            <td>设计模式之禅</td>
            <td>69.00</td>
            <td>2011-12</td>
            <td></td>
            <td>192.168.1.5</td>
        </tr>
        <tr>
            <td class="sequence">6</td>
            <td>轻量级 Java EE 企业应用实战</td>
            <td>99.00</td>
            <td>2012-04</td>
            <td>5000</td>
            <td>192.358.1.125</td>
        </tr>
        <tr>
            <td class="sequence">7</td>
            <td>Java 开发实战经典</td>
            <td>79.80</td>
            <td>2012-01</td>
            <td>2000</td>
            <td>192.168.1.25</td>
        </tr>
        <tr>
            <td class="sequence">8</td>
            <td>Java Web 开发实战经典</td>
            <td>69.80</td>
            <td>2011-11</td>
            <td>2500</td>
            <td>215.168.54.125</td>
        </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var tableObject = $('#tableSort');//获取id为tableSort的table对象
        var tbHead = tableObject.children('thead');//获取table对象下的thead
        var tbHeadTh = tbHead.find('tr th');//获取thead下的tr下的th
        var tbBody = tableObject.children('tbody');//获取table对象下的tbody
        var tbBodyTr = tbBody.find('tr');//获取tbody下的tr
        var sortIndex = -1; //初始化索引
        tbHeadTh.each(function() {//遍历thead的tr下的th
            var thisIndex = tbHeadTh.index($(this));//获取th所在的列号
            //鼠标移除和聚焦的效果，不重要
            $(this).mouseover(function(){ //鼠标移开事件
                tbBodyTr.each(function(){//编列tbody下的tr
                    var tds = $(this).find("td");//获取列号为参数index的td对象集合
                    $(tds[thisIndex]).addClass("hover");
                });
            }).mouseout(function(){ //鼠标聚焦时间
                        tbBodyTr.each(function(){
                            var tds = $(this).find("td");
                            $(tds[thisIndex]).removeClass("hover");
                        });
                    });

            $(this).click(function() {  //鼠标点击事件
                var dataType = $(this).attr("type"); //获取当前点击列的 type
                checkColumnValue(thisIndex, dataType); //对当前点击的列进行排序 （当前索引，排序类型）
            });
        });

        //显示效果，不重要
        $("tbody tr").removeClass();//先移除tbody下tr的所有css类
        $("tbody tr").mouseover(function(){
            $(this).addClass("hover");
        }).mouseout(function(){
                    $(this).removeClass("hover");
                });

        //对表格排序
        function checkColumnValue(index, type) {
            var trsValue = new Array();  //创建一个新的列表
            tbBodyTr.each(function() { //遍历所有的tr标签
                var tds = $(this).find('td');//查找所有的 td 标签
                //将当前的点击列 push 到一个新的列表中
                //包括 当前行的 类型、当前索引的 值，和当前行的值
                trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());
                $(this).html("");//清空当前列
            });
            var len = trsValue.length;//获取所有要拍戏的列的长度
            if(index == sortIndex){//sortIndex =-1
                trsValue.reverse();//???
            } else {
                for(var i = 0; i < len; i++){//遍历所有的行
                    type = trsValue[i].split(".separator")[0];// 获取要排序的类型
                    for(var j = i + 1; j < len; j++){
                        value1 = trsValue[i].split(".separator")[1];//当前值
                        value2 = trsValue[j].split(".separator")[1];//当前值的下一个
                        if(type == "number"){
                            //js 三元运算  如果 values1 等于 '' （空） 那么，该值就为0，否则 改值为当前值
                            value1 = value1 == "" ? 0 : value1;
                            value2 = value2 == "" ? 0 : value2;
                            //parseFloat() 函数可解析一个字符串，并返回一个浮点数。
                            //该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
                            //如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。
                            if(parseFloat(value1) > parseFloat(value2)){//如果当前值 大于 下一个值
                                var temp = trsValue[j];//那么就记住 大 的那个值
                                trsValue[j] = trsValue[i];
                                trsValue[i] = temp;
                            }
                        } else if(type == "ip"){
                            if(ip2int(value1) > ip2int(value2)){
                                var temp = trsValue[j];
                                trsValue[j] = trsValue[i];
                                trsValue[i] = temp;
                            }
                        } else {
                            //JavaScript localeCompare() 方法 用本地特定的顺序来比较两个字符串。
                            //说明比较结果的数字。
                            // 如果 stringObject 小于 target，则 localeCompare() 返回小于 0 的数。
                            // 如果 stringObject 大于 target，则该方法返回大于 0 的数。
                            // 如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。
                            if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器
                                var temp = trsValue[j];
                                trsValue[j] = trsValue[i];
                                trsValue[i] = temp;
                            }
                        }
                    }
                }
            }
            for(var i = 0; i < len; i++){
                //将排序完的 值 插入到 表格中
                //:eq(index) 匹配一个给定索引值的元素
                $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);
                //console.log($("tbody tr:eq(" + i + ")").html())
            }
            sortIndex = index;
        }
        //IP转成整型 ？？？？？
        function ip2int(ip){
            var num = 0;
            ip = ip.split(".");
            //Number() 函数把对象的值转换为数字。
            num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
            return num;
        }
    })
</script>
</body>
</html>

效果如下：

下面面表头的测试

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        .tbl-list, .tbl-list td, .tbl-list th {
            border: solid 1px #000;
            border-collapse: collapse;
            padding: 10px;
            margin: 15px;
        }
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <title>table sort</title>
    <script type="text/javascript">
        //排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型
        function sortAble(th, tableId, iCol, dataType) {

            var ascChar = "▲";
            var descChar = "▼";

            var table = document.getElementById(tableId);

            //排序标题加背景色,并把所有单元格的“升序、降序” 小图标都先清除掉

            for (var t = 0; t < table.tHead.rows[0].cells.length; t++) {
                var th = $(table.tHead.rows[0].cells[t]);
                var thText = th.html().replace(ascChar, "").replace(descChar, "");
                if (t == iCol) {
                    th.css("background-color", "#ccc");
                }
                else {
                    th.css("background-color", "#fff");
                    th.html(thText);
                }

            }



            //给排序标题加“升序、降序” 小图标显示
            var th = $(table.tHead.rows[0].cells[iCol]);
            if (th.html().indexOf(ascChar) == -1 && th.html().indexOf(descChar) == -1) {
                th.html(th.html() + ascChar);
            }
            else if (th.html().indexOf(ascChar) != -1) {
                th.html(th.html().replace(ascChar, descChar));
            }
            else if (th.html().indexOf(descChar) != -1) {
                th.html(th.html().replace(descChar, ascChar));
            }


        }




        //jQuery加载完以后，分组行高亮背景，分组明细隐藏
        $(document).ready(function () {

        });





    </script>
</head>

<body>

<table id="tableId" class="tbl-list" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th>序号</th>
        <th id="QNumber"  οnclick="sortAble(this,'tableId', 1,'string')"
            style="cursor:pointer">姓名</th>
        <th οnclick="sortAble(this,'tableId', 2, 'date')"
            style="cursor:pointer">生日</th>
        <th οnclick="sortAble(this,'tableId', 3, 'int')"
            style="cursor:pointer">年龄</th>
        <th οnclick="sortAble(this,'tableId', 4, 'float')"
            style="cursor:pointer">工资</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>