当前位置: 首页 > 工具软件 > TableSort > 使用案例 >

表格排序tablesort小案列

冯敏达
2023-12-01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title>tablesort表格排序</title>
    <style>
        /* 自定义设置排序指示箭头 */
        .SortDescCss{background-image:url(Desc.gif);background-repeat:no-repeat;background-position:right center;}
        .SortAscCss{background-image:url(Asc.gif);background-repeat:no-repeat;background-position:right center;}
    </style>
</head>
<body>
    <table border="1" cellpadding="5" cellspacing="0" id="myTable">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>工号</th>
            <th>职位</th>
            <th>性别</th>
            <th>业绩</th>
            <th>报到时间</th>
        </tr>
        <tr>
            <td>1</td>
            <td>刘德华</td>
            <td>8008</td>
            <td>总裁</td>
            <td>男</td>
            <td>98</td>
            <td>2008-04-12</td>
        </tr>
        <tr>
            <td>2</td>
            <td>吴奇隆</td>
            <td>8004</td>
            <td>主管</td>
            <td>男</td>
            <td>80</td>
            <td>2008-04-16</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王光良</td>
            <td>8003</td>
            <td>经理</td>
            <td>男</td>
            <td>85</td>
            <td>2008-04-15</td>
        </tr>
        <tr>
            <td>4</td>
            <td>张学友</td>
            <td>8009</td>
            <td>副总裁</td>
            <td>男</td>
            <td>90</td>
            <td>2008-04-11</td>
        </tr>
        <tr>
            <td>5</td>
            <td>张柏芝</td>
            <td>8005</td>
            <td>助理</td>
            <td>女</td>
            <td>78</td>
            <td>2008-04-13</td>
        </tr>
        <tr>
            <td>6</td>
            <td>陈冠希</td>
            <td>8001</td>
            <td>总监</td>
            <td>男</td>
            <td>60</td>
            <td>2008-04-18</td>
        </tr>
        <tr>
            <td>7</td>
            <td>陈慧琳</td>
            <td>8002</td>
            <td>试用期</td>
            <td>女</td>
            <td>85</td>
            <td>2008-04-18</td>
        </tr>
        <tr>
            <td>8</td>
            <td>张曼玉</td>
            <td>8007</td>
            <td>高级经理</td>
            <td>女</td>
            <td>82</td>
            <td>2008-04-16</td>
        </tr>
        <tr>
            <td>9</td>
            <td>周润发</td>
            <td>8006</td>
            <td>副总裁</td>
            <td>男</td>
            <td>88</td>
            <td>2008-04-13</td>
        </tr>
    </table>
<br />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="tablesorter.js"></script>
<script>
    //点击任意表头可以排序
    new TableSorter("myTable");
    //点击0,2,5,6表头可以排序
    new TableSorter("myTable", 0, 2 , 5, 6);
    //点击表头排序并且返回提示
    new TableSorter("myTable").OnSorted = function(c, t){
        //Asc升序,Desc降序
        alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc"));
    }
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/moumou0213/p/7070766.html

 类似资料: