jsp+js实现可排序表格

最新推荐文章于 2021-03-31 11:45:09 发布
最新推荐文章于 2021-03-31 11:45:09 发布
阅读量738 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jsp javascript 文章标签： jsp function stylesheet html string table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jmen6/article/details/3723104
这篇博客介绍了一个利用JavaScript实现的JSP表格排序功能。通过定义`tableSort.js`函数，实现了根据表格列点击进行升序或降序排序。代码中包括`sort`、`generateCompareTR`和`convert`三个主要函数，处理不同数据类型的排序。示例中展示了如何在HTML表格上应用这些功能，使得用户可以通过点击表格头进行动态排序。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

首先，定义一个js：  tableSort.js:

function sort(tableId, sortColumn,nodeType) {  
    var table = document.getElementById("theTable");  
    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;  
}  
 
 
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;  
            }  
        }  
    };  
}  
 
 
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="UTF-8"%> 
<%  
    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 'tabel.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="userjs/tableSort.js"></script> 
    </head> 
 
    <body> 
        <table id="theTable" align="center" border="1"> 
            <thead> 
                <tr> 
                    <td> 
                        标题1  
                    </td> 
                    <td onclick="sort(theTable,1,'int')"> 
                        标题2  
                    </td> 
                    <td onclick="sort(theTable,2,'int')"> 
                        标题3  
                    </td> 
                    <td onclick="sort(theTable,3,'int')"> 
                        标题4  
                    </td> 
                    <td onclick="sort(theTable,4,'int')"> 
                        标题5  
                    </td> 
                    <td onclick="sort(theTable,5,'int')"> 
                        标题6  
                    </td> 
                    <td onclick="sort(theTable,6,'int')"> 
                        标题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>

之后就可以看到效果了。

对JSP页面中的字段进行排序的方法
goodhuang的博客
04-17 3684
表格排序 sortTable #table1{font:SimSun;font-size:16px;background-color:silver;} .changeColor {height:18px;background-color:expression((this.sectionRowIndex%2==0)?"#DBF2FA":"#D...
jsp页面模块排序
weixin_42286461的博客
06-26 1750
 &lt;div class="project-holder specialProject_${id}" style="display:none;" data-id="${sort}"&gt; &lt;div class="project-list-holder remoteProject-list-holder" data-id="1"&gt; &lt;h4 cla
JSP前端数据本地排序
weixin_34132768的博客
06-28 414
在前端中我们经常需要数据的排序，首先写引入我写好的js $(function($) { $('#sclazzId').val($('#voId').val()); document.getElementsByName('nameup')[0].style.display = "none"; document.getElementsByName('na...
jsp页面表格排序 js文件
04-08
本js文件解决了多列表格排序问题，把很复杂的问题，变得如此简单！
JSP后台的分页与排序操作（终于开始更了）
中华儿女快起床了
01-09 1312
新年快乐前言分页与排序分页原理排序要点希望你万事都如意，如果有不对的地方评论留言欢迎指正，点个赞o~ 前言 大家好！好久不见。今年因为许多事情导致后续都没有更新其他新的内容，这里说一声抱歉哦，最近会陆陆续续地加更，会在这里开一个我自己做的一个网站项目，网络方向的先放一放了··大家感兴趣的可以关注我呀！因为项目比较散乱，所以我先自己写完再整个项目后期编辑整理嗷。 分页与排序 今天的分页和排序主要是用数据结构的思路，对数据条目进行一定的分类管理，实现起来很简单的（因为我看到我写JavaScript方面的浏览量最
JavaScript实现表格排序，点击表头切换升序降序，非常简单
08-27
<title>JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } (0)">...
tablesorter实现HTML表格点击表头排序
04-01
`tablesorter`是一个非常实用的JavaScript库，它为HTML表格提供了强大的排序功能，不仅适用于纯HTML页面，也兼容JSP、PHP等服务器端渲染技术。 `tablesorter`的核心功能在于它能够监听表格的表头（thead）点击事件...
JSP + Servlet + ExtJS实现CRUD操作
03-16
本项目是关于使用Java服务器页面（JSP）和Servlet技术，结合ExtJS前端框架，实现数据的创建（Create）、读取（Read）、更新（Update）和删除（Delete），也就是常说的CRUD操作。这是一个典型的Web应用程序开发示例，...
自动排课系统 可以根据提供的课程表进行排
04-21
本软件可以设置你的课程表，老师的课程表，根据索提交的数据进行自动排序，非常好用！
JSP 前端数据本地排序实例代码
01-20
在前端中我们经常需要数据的排序，首先写引入我写好的js $(function($) { $('#sclazzId').val($('#voId').val()); document.getElementsByName('nameup')[0].style.display = none; document.getElementsByName('nameup')[1].style.display = none; document.getElementsByName('nameup')[2].style.display = none; document.getEle
javascript表单排序
04-29
关于javascript表单排序的一些代码 和总结
tablesorter.js表格排序使用方法(支持中文排序)
12-02
最近，因为项目需要，对表格排序做了一下摸索，整理如下： 1. 首先，可从官网下载tablesorter.js，但并不支持中文的排序，对其源码进行修改： 部分源码： function sortText(a, b) { return ((a < b> b) ? 1 : 0)); }; function sortTextDesc(a, b) { return ((b < a> a) ? 1 : 0)); }; 修改后： function sortText(a,b) { return a.localeCompare(b); }; f
Js实现排序
dachuichaobang的博客
03-31 390
1.冒泡排序 原理：两两比较相邻的元素，如果反序，则交换位置，直到没有反序为止。 a、将序列中的相邻元素依次比较，较小的数向下冒（即交换到前面）；第一轮比较结束后，序列第一个元素是当前序列的最小值。 b、对序列当中剩下的n-1个元素再次执行步骤a，直至完成。共需要n-1轮比较。 <script> var arr = [1,9,4,2,5,3,8,6,7]; function MpSort(array){ if(Array.isArray(array)){//判断是否为
java 点击表头排序_jsp中table点击表头实现排序的功能--Jsp中table表头排序
weixin_36024829的博客
02-25 1007
表头名字,页面中获取上次点击的表头的名称和这次点击的表头的名称做比较，如果两者相同就按原先相反的顺序排列，否则新列升序排列，获取排列顺序的列名及排列顺序以后，传到后台获取相应sql，添加order by 语句，完成排序功能排序顺序值可在form中存放在隐藏域中，思路就是这样。例如在使用Birt报表工具创建报表需要点击表头的名称排序的功能时，可以再表头名称处增加一个超链接，链接内容为TargetUR...
例子5：排序查询数据库中表的数据（JSP）
YanHSama的博客
04-13 1640
index.jsp <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <%@ taglib tagdir="/WEB-INF/tags" prefix="inquire" %> <% String path = request.getContextPath(); String...
AJAX与JS在JSP表格排序中的应用
AJAX动态排序、JS表格排序和JSP表格排序是网页开发中实现表格数据展示和排序功能的常用技术。下面将详细介绍这些技术的关键知识点： **AJAX动态排序** AJAX（Asynchronous JavaScript and XML）是一种在无需重新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值