龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Jsp编程 >

jsp结合js实现表格排序功能

时间:2009-12-21 11:47来源:未知 作者:admin 点击: 次
分享到：
首先，定义一个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
首先，定义一个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>

　　之后就可以看到效果了。

收藏文章
表情删除后不可恢复，是否删除
取消
确定
图片正在上传，请稍后...
取消上传
评论内容为空！
还没有评论，快来抢沙发吧！
该评论已关闭!
龙盟编程正在使用畅言云评
去社区看看吧
去热评看看吧

热评话题

关闭
按钮 内容不能为空！
立刻说两句吧！ 查看0条评论
精彩图集
JSP + ajax实现输入框自动补全功能 实例代码
JSP + ajax实现
jsp连接MySQL操作GIS地图数据实现添加point的功能代码
jsp连接MySQ
JSP页面上用下横线代替文本框效果的代码
JSP页面上用

热门标签

偏特化 过滤函数 最高 .first() 风险 代码风格 批量数据 前端 fun 自动隐藏 输入字符 鼠标悬浮 解码 安装Imaging报错 增加 运行原理 添加 oracle10g 302 磁盘更改 tune2fs命令 保存SD 多进程通信 自定义异常 差别 页面乱码 支票金额大写 (X)HTML 64位win7 判断是否为json 分片技术 dispaly:inli Metabase的代码 托盘 telnet命令详 下载限制 阻塞 C语言特性 服务器参数 OS Metabase LVS连接 post传值 调试模式 Android4.0 执行 const限定符 拼接字符串 访问变慢 浮点数的存储 检测手机 加强版 3G 字体 window调用api 嵌套 php导入csv the raw 添加管理员

赞助商链接