页面数据排序

来源：互联网发布：淘宝最晚多久确认收货编辑：程序博客网时间：2024/06/09 21:28
原生js实现点击表格title排序。
<%@ page contentType="text/html;charset=utf-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><html><head>    <title>投票统计</title>    <script type="text/javascript" src="<c:url value='/static/fj/js/jquery-1.11.1.min.js'/>" ></script>  </head><style type="text/css">    #tableSort{moz-user-select: -moz-none;-moz-user-select: none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;        border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;width: 100%;text-align: center;margin:5px 0;}    #tableSort th{cursor: pointer; background: #eee}    #tableSort tr:nth-child(even){background: #f9f9f9}    #tableSort th,#tableSort td{padding: 3px; border:1px solid #ccc;}    .home_tp{width: 210px; float: left;transition: all 0.2s; display: block; height: 56px; line-height: 56px; border-radius: 5px; font-size: 24px; font-weight: normal; color: #FFFFFF; text-align: center; }    .home_tp.blue{background: #3493ea;}    .home_tp.blue:hover{background: #2e82d0;}    .home_tp_main{width: 170px;  height: 50px;float: left; margin-top: 10px;position: relative; left: 50%; margin-left: -120px;}</style><script type="text/javascript">    $(function (){        var tbody = document.querySelector('#tableSort').tBodies[0];        var th = document.querySelector('#tableSort').tHead.rows[0].cells;        var td = tbody.rows;        for (var i = 0; i < th.length; i++) {            th[i].flag = 1;            th[i].onclick = function () {                sort(this.getAttribute('data-type'), this.flag, this.cellIndex);                this.flag = -this.flag;            };        };        function sort(str, flag, n) {            var arr = []; //存放DOM            for (var i = 0; i < td.length; i++) {                arr.push(td[i]);            };            //排序            arr.sort(function (a, b) {                return method(str, a.cells[n].innerHTML, b.cells[n].innerHTML) * flag;            });            //添加            for (var i = 0; i < arr.length; i++) {                tbody.appendChild(arr[i]);            };        };        //排序方法        function method(str, a, b) {            switch (str) {                case 'num': //数字排序                    return a - b;                    break;                case 'string': //字符串排序                    return a.localeCompare(b);                    break;                default:  //日期排序，IE8下'2012-12-12'这种格式无法设置时间，替换成'/'                    return new Date(a.split('-').join('/')).getTime() - new Date(b.split('-').join('/')).getTime();            };        };    });</script><body><table align="center" width="100%" id ="tableSort">    <thead>    <tr align="center" style="line-height: 50px;">        <th width="100" align="center" data-type="num">序号</th>        <th width="100" align="center"data-type="string">姓名</th>        <th width="100" align="center"data-type="string">性别</th>        <th width="500" data-type="num">票数</th>    </tr>    </thead>    <tbody>    <c:forEach var="fj" items="${pager.list}" varStatus="vs">        <tr rel="${fj.id}" align="center" style="line-height: 26px;">            <td>${vs.count+(pager.pageNum-1)*pager.numPerPage}</td>            <td>${fj.name}</td>            <td>${fj.sex}</td>            <td>${fj.tickets}</td>        </tr>    </c:forEach>    </tbody></table><a href="<c:url value='/api/fj/exportExc' />" class="home_tp blue home_tp_main">导出</a></body></html>
阅读全文
0 0