`

jsp+js实现可排序表格

JSPCSSCacheJavaScriptHTML 
阅读更多 
首先，定义一个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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<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 onclick="sort(theTable,1,'int')" style="cursor: hand;">  
                        标题2   
                    </td>  
                    <td onclick="sort(theTable,2,'int')" style="cursor: hand;">  
                        标题3   
                    </td>  
                    <td onclick="sort(theTable,3,'int')" style="cursor: hand;">   
                        标题4   
                    </td>  
                    <td onclick="sort(theTable,4,'int')" style="cursor: hand;">   
                        标题5   
                    </td>  
                    <td onclick="sort(theTable,5,'int')" style="cursor: hand;">   
                        标题6   
                    </td>  
                    <td onclick="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>

 

分享到：
| Tomcat的性能优化及部署时的参数调整
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    tablesorter实现HTML表格点击表头排序

    `tablesorter`是一个非常实用的JavaScript库，它为HTML表格提供了强大的排序功能，不仅适用于纯HTML页面，也兼容JSP、PHP等服务器端渲染技术。 `tablesorter`的核心功能在于它能够监听表格的表头（thead）点击事件...

    JavaScript实现表格排序，点击表头切换升序降序，非常简单

    &lt;title&gt;JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } (0)"&gt;...

    JSP+Ext实现CURD

    在IT行业中，"JSP+Ext实现CURD"是一个常见的开发任务，涉及到Web应用的后端和前端交互，用于数据的创建(Create)、读取(Read)、更新(Update)和删除(Delete)操作。JSP（JavaServer Pages）是Java的一种动态网页技术，...

    jsp页面表格排序 js文件

    在这个场景下，我们关注的是`jsp页面表格排序 js文件`，这通常涉及到前端JavaScript技术，用于实现表格数据的客户端排序，而无需每次用户点击列头时都向服务器发送请求。 `jsp页面表格排序 js文件`的核心在于...

    JSP + Servlet + ExtJS实现CRUD操作

    本项目是关于使用Java服务器页面（JSP）和Servlet技术，结合ExtJS前端框架，实现数据的创建（Create）、读取（Read）、更新（Update）和删除（Delete），也就是常说的CRUD操作。这是一个典型的Web应用程序开发示例，...

    javascript带箭头的表格排序实例

    在JavaScript编程中，实现带箭头的表格排序是一种常见的需求，尤其在数据展示和交互式网页设计中。本文将深入探讨如何使用JavaScript实现这一功能，包括理解基础的HTML表格结构、CSS样式设置以及JavaScript事件处理...

    jsp+servlet+ajax+easyui学生管理系统

    5. **实现AJAX**：在JSP中使用JavaScript发送异步请求，更新页面内容。 6. **部署和测试**：将项目打包成WAR文件，部署到Tomcat等服务器，进行功能验证和性能优化。 通过这个项目，初学者不仅可以掌握JSP、Servlet...

    实现表格按照列排序和拖拽行排序

    为了提供更好的用户体验，开发者经常需要实现表格的交互功能，比如按照列排序和拖拽行排序。在这个项目中，我们将利用jQuery库以及两个插件：jquery.tablednd_0_5.js和jquery.tablesorter.js来实现这些功能。 首先...

    SSH整合应用+Jquary+Flexigrid实现表格数据显示

    在`user_list.jsp`页面中，我们需要引入Jquery库和Flexigrid的CSS及JS文件，然后设置Flexigrid的参数，如表格列定义、URL数据源（通常指向`getUsers` Action）、分页设置等。当页面加载或特定事件触发时，Flexigrid...

    JSP+ext+人力资源管理系统

    EXT框架，全称为EXT JS，是一个用于构建富客户端Web应用的JavaScript库。EXT提供了丰富的组件库，如表格、面板、窗口、表单等，使得开发者可以快速构建出具有桌面级用户体验的Web应用。EXT框架的强项在于其数据绑定...

    js实现点击表头排序

    我们首先获取表格的`&lt;tbody&gt;`元素，然后遍历所有行并获取每行的子元素（即数据单元格），将它们按照当前列的值进行比较和排序。 ```javascript function sortTable(columnIndex) { var table = document....

    js表格点击表头排序

    在JavaScript编程中，实现“js表格点击表头排序”是一个常见的功能需求，特别是在网页数据展示时，用户往往希望可以通过点击表头快速对数据进行升序或降序排列。本知识点将详细讲解如何在纯前端环境下，利用...

    JSP 与数据库联系 从数据可中把数据放到Jsp页面上以表格的形式显示

    同时，为了实现颜色变化，可以使用CSS样式或者JavaScript进行控制： ```jsp (rs.next()) { %&gt; () % 2 == 0 ? 'background-color: #f2f2f2;' : '' %&gt;"&gt; &lt;td&gt;&lt;%= rs.getString("column1") %&gt; &lt;td&gt;&lt;%= rs....

    JSP页面表格初始化

    通过以上分析可以看出，这个JSP页面中的JavaScript脚本主要实现了利用dhtmlXGrid组件来构建一个功能丰富的动态表格。它不仅包含了基本的表格配置，还涉及到了与服务器端的数据交互，充分展示了JavaScript与JSP结合的...

    js可编辑的网页表格，并可将填写单元格内容保存到MySQL数据库，再读取到另一表格中

    在本项目中，我们主要探讨如何使用JavaScript创建一个可编辑的网页表格，并通过PHP与MySQL数据库进行交互，实现数据的保存和读取。这是一项基本的前端与后端结合的应用，对于网页应用开发来说是非常基础且重要的技能...

    基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统.zip

    在成绩管理系统中，jQuery用于优化前端用户体验，比如通过AJAX实现异步数据加载，避免页面刷新，或者实现诸如表格排序、筛选等交互功能。 4. **Easy-UI**：Easy-UI是一个基于jQuery的前端框架，提供了一系列预定义...

    基于Jsp+Servlet+Layui的学生信息管理系统.zip

    在本项目中，Layui可能被用于创建学生信息表格，提供搜索、排序和分页功能。同时，它也可能用于创建美观的表单元素，如输入框、选择框，以及提交按钮等。Layui的JavaScript API和CSS样式使得页面交互更加友好。 ...

    struts2+hibernate+datagrid index.jsp+book.css+book.js

    "book.js"可能包含了JavaScript代码，用于实现DataGrid的交互功能，比如数据加载、排序和分页等。"item6 出书"可能是具体的业务数据或配置文件，具体用途需要查看其内容才能确定。 总的来说，这个项目是一个使用...

    js 根据表头进行排序

    在JavaScript（JS）编程中，实现表格数据的排序是一个常见的需求，特别是在网页开发中。"根据表头进行排序"的功能允许用户通过点击表格的列标题（表头）来对表格内容进行升序或降序排序。这个功能对于展示大量结构化...

Magicbox
Global site tag (gtag.js) - Google Analytics