jsp+js实现可排序表格

xiaoxiao2025-02-12 16

首先，定义一个js： /** * 排序主方法 * @param {} tableId * @param {} sortColumn * @param {} nodeType */ function sort(tableId, sortColumn, nodeType) { var table = document.getElementById(tableId); var tableBody = table.tBodies[0]; var tableRows = tableBody.rows; var rowArray = new Array(); for (var i = 0; i < tableRows.length; i++) { rowArray[i] = tableRows[i]; } if (table.sortColumn == sortColumn) { rowArray.reverse(); } else { rowArray.sort(generateCompareTR(sortColumn, nodeType)); } var tbodyFragment = document.createDocumentFragment(); for (var i = 0; i < rowArray.length; i++) { tbodyFragment.appendChild(rowArray[i]); } tableBody.appendChild(tbodyFragment); table.sortColumn = sortColumn; } /** * 比较函数 * @param {} sortColumn * @param {} nodeType * @return {} */ function generateCompareTR(sortColumn, nodeType) { return function compareTR(trLeft, trRight) { var leftValue = convert(trLeft.cells[sortColumn].firstChild.nodeValue, nodeType); var rightValue = convert( trRight.cells[sortColumn].firstChild.nodeValue, nodeType); if (leftValue < rightValue) { return -1; } else { if (leftValue > rightValue) { return 1; } else { return 0; } } }; } /** * 值转换 * @param {} value * @param {} dataType * @return {} */ function convert(value, dataType) { switch (dataType) { case "int" : return parseInt(value); case "float" : return parseFloat(value); case "date" : return new Date(Date.parse(value)); default : return value.toString(); } }

然后是使用：

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'table.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page">  <script type="text/javascript" src="${pageContext.request.contextPath}/js/sort.js"></script> </head> <body> <table id="theTable" align="center" border="1"> <thead> <tr> <td> 标题1 </td> <td οnclick="sort(theTable,1,'int')" style="cursor: hand;"> 标题2 </td> <td οnclick="sort(theTable,2,'int')" style="cursor: hand;"> 标题3 </td> <td οnclick="sort(theTable,3,'int')" style="cursor: hand;"> 标题4 </td> <td οnclick="sort(theTable,4,'int')" style="cursor: hand;"> 标题5 </td> <td οnclick="sort(theTable,5,'int')" style="cursor: hand;"> 标题6 </td> <td οnclick="sort(theTable,6,'int')" style="cursor: hand;"> 标题7 </td> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> <td> 5 </td> <td> 6 </td> <td> 7 </td> </tr> <tr> <td> 2 </td> <td> 3 </td> <td> 4 </td> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 1 </td> </tr> <tr> <td> 3 </td> <td> 4 </td> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 1 </td> <td> 2 </td> </tr> <tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> </tr> <tr> <td> 6 </td> <td> 7 </td> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> <td> 5 </td> </tr> </tbody> </table> </body> </html>

相关资源：AJAX动态排序，JS表格排序，JSP 排序

转载请注明原文地址: https://www.6miu.com/read-5024577.html

Java

最新回复(0)