table排序，多个表格排序

Posted 大宇007

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table排序，多个表格排序相关的知识，希望对你有一定的参考价值。

<!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=gb2312" />
    <title>table表格排序</title>
    <style type="text/css">
        .fu_list{ width:500px; border:1px solid #ebebeb;line-height:20px; font-size:12px;}
        .fu_list thead td{background-color:#ebebeb;}
        .fu_list td{padding:5px;}
        .fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/}
        .fu_list a:link, .fu_list a:visited, .fu_list a:hover, .fu_list a:active{text-decoration:none;color:#333;}
        .fu_list thead a{padding-right:15px;}
        .fu_list thead a.up, .fu_list thead a.down{ background:url(‘‘) right center no-repeat; }
        .fu_list thead a.down{background-image:url(‘‘)}

        .hoverTr{background-color:Orange;}
    </style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" class="fu_list" id="idTable">
    <thead>
    <tr>
        <td> <a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td>
        <td width="150" align="center"><a href="javascript:he(‘idTable‘)" id="idAddtime" class="up">上传时间</a></td>
        <td width="50" align="center"><a href="javascript:void(0)" id="idSize">大小</a></td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td _order="JSCSS">JSCSS</td>
        <td align="center" _order="2008/9/12 8:51:09">2008/9/12 8:51:09</td>
        <td align="right" _order="433247">433247</td>
    </tr>
    <tr>
        <td _order="逗你玩">逗你玩</td>
        <td align="center" _order="2008/3/6 20:12:23">2008/3/6 20:12:23</td>
        <td align="right" _order="11394">11394</td>
    </tr>
    <tr>
        <td _order="张迪">张迪</td>
        <td align="center" _order="2008/10/4 20:21:54">2008/10/4 20:21:54</td>
        <td align="right" _order="351">351</td>
    </tr>
    <tr>
        <td _order="Index">Index</td>
        <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
        <td align="right" _order="14074">14074</td>
    </tr>
    <tr>
        <td _order="阿波罗">阿波罗</td>
        <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
        <td align="right" _order="2844">2844</td>
    </tr>
    <tr>
        <td _order="张涛">张涛</td>
        <td align="center" _order="2012/10/4 20:21:54">2012/10/4 20:21:54</td>
        <td align="right" _order="1236">1236</td>
    </tr>
    <tr>
        <td _order="jSSon">jSSon</td>
        <td align="center" _order="2010/12/12 8:51:09">2010/12/12 8:51:09</td>
        <td align="right" _order="10101">10101</td>
    </tr>
    </tbody>
</table>
<hr style="color: #942a25">

<table border="0" cellspacing="0" cellpadding="0" class="fu_list" id="idTable2">
    <thead>
    <tr>
        <td> <a href="javascript:void(0)" id="idTitle2">名称</a> / <a href="javascript:void(0)" id="idExt2">类型</a></td>
        <td width="150" align="center"><a href="javascript:sort(‘idTable2‘)" id="idAddtime2" class="up">上传时间</a></td>
        <td width="50" align="center"><a href="javascript:void(2)" id="idSize2">大小</a></td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td _order="JSCSS">JSCSS</td>
        <td align="center" _order="2008/9/12 8:51:09">2008/9/12 8:51:09</td>
        <td align="right" _order="433247">433247</td>
    </tr>
    <tr>
        <td _order="逗你玩">逗你玩</td>
        <td align="center" _order="2008/3/6 20:12:23">2008/3/6 20:12:23</td>
        <td align="right" _order="11394">11394</td>
    </tr>
    <tr>
        <td _order="张迪">张迪</td>
        <td align="center" _order="2008/10/4 20:21:54">2008/10/4 20:21:54</td>
        <td align="right" _order="351">351</td>
    </tr>
    <tr>
        <td _order="Index">Index</td>
        <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
        <td align="right" _order="14074">14074</td>
    </tr>
    <tr>
        <td _order="阿波罗">阿波罗</td>
        <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
        <td align="right" _order="2844">2844</td>
    </tr>
    <tr>
        <td _order="张涛">张涛</td>
        <td align="center" _order="2012/10/4 20:21:54">2012/10/4 20:21:54</td>
        <td align="right" _order="1236">1236</td>
    </tr>
    <tr>
        <td _order="jSSon">jSSon</td>
        <td align="center" _order="2010/12/12 8:51:09">2010/12/12 8:51:09</td>
        <td align="right" _order="10101">10101</td>
    </tr>
    </tbody>
</table>

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="TableOrder.js" type="text/javascript"></script>
<!--<script src="ZhCN_Pinyin.min.js" type="text/javascript"></script>-->
<script type="text/javascript">

    TableOrderOper.Init("idTable", 0, {
        OnShow: function (i, trJqObj, _tbodyObj) {
            trJqObj.attr("class", ((i + 1) % 2 == 0 ? "hoverTr" : ""));
        }
    });
    TableOrderOper.SetOrder("idTitle", 0, { ValAttr: "_order", DataType: "string" });
    TableOrderOper.SetOrder("idAddtime", 1, { ValAttr: "_order", DataType: "date" });
    TableOrderOper.SetOrder("idSize", 2, { DataType: "int", DefaultOrder: true, OnClick: function () {
        alert("idSize");
    } });


//    function sort(a){
//        TableOrderOper.Init(a, 0, {
//            OnShow: function (i, trJqObj, _tbodyObj) {
//                trJqObj.attr("class", ((i + 1) % 2 == 0 ? "hoverTr" : ""));
//            }
//        });
//        TableOrderOper.SetOrder("idAddtime2", 1, { ValAttr: "_order", DataType: "date" });
//    }
//    function he(a){
//        TableOrderOper.Init(a, 0, {
//            OnShow: function (i, trJqObj, _tbodyObj) {
//                trJqObj.attr("class", ((i + 1) % 2 == 0 ? "hoverTr" : ""));
//            }
//        });
//        TableOrderOper.SetOrder("idAddtime", 1, { ValAttr: "_order", DataType: "date" });
//    }
</script>
</body>
</html>

 

以上是关于table排序，多个表格排序的主要内容，如果未能解决你的问题，请参考以下文章

Layui 之动态表格排序

Element表格el-table多列排序，后端接口排序

表格列点击排序

elementUI 表格分页后台排序记录

在table中的前端排序

Angular Material 2：多个 mat-table 排序仅适用于第一个表