jsp+js实现可排序表格

最新推荐文章于 2021-03-31 11:45:09 发布
最新推荐文章于 2021-03-31 11:45:09 发布
阅读量3.5k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： jsp 插件、实例等项目中常用收集
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenzhihui_2010/article/details/40834665

　首先，定义一个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_34132768的博客
06-28 413
在前端中我们经常需要数据的排序，首先写引入我写好的js $(function($) { $('#sclazzId').val($('#voId').val()); document.getElementsByName('nameup')[0].style.display = "none"; document.getElementsByName('na...
jsp页面表格排序 js文件
04-08
本js文件解决了多列表格排序问题，把很复杂的问题，变得如此简单！
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应用程序开发示例，...
JSP后台的分页与排序操作（终于开始更了）
中华儿女快起床了
01-09 1312
新年快乐前言分页与排序分页原理排序要点希望你万事都如意，如果有不对的地方评论留言欢迎指正，点个赞o~ 前言 大家好！好久不见。今年因为许多事情导致后续都没有更新其他新的内容，这里说一声抱歉哦，最近会陆陆续续地加更，会在这里开一个我自己做的一个网站项目，网络方向的先放一放了··大家感兴趣的可以关注我呀！因为项目比较散乱，所以我先自己写完再整个项目后期编辑整理嗷。 分页与排序 今天的分页和排序主要是用数据结构的思路，对数据条目进行一定的分类管理，实现起来很简单的（因为我看到我写JavaScript方面的浏览量最
自动排课系统 可以根据提供的课程表进行排
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
jsp页面模块排序
weixin_42286461的博客
06-26 1748
 &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
Js实现排序
dachuichaobang的博客
03-31 389
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...
AJAX与JS在JSP表格排序中的应用
AJAX动态排序、JS表格排序和JSP表格排序是网页开发中实现表格数据展示和排序功能的常用技术。下面将详细介绍这些技术的关键知识点： **AJAX动态排序** AJAX（Asynchronous JavaScript and XML）是一种在无需重新...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值