首页 | 源码下载 | 网站模板 | 网页特效 | 广告代码 | 网页素材 | 字体下载 | 书库 | 站长工具
会员投稿 投稿指南 RSS订阅

栏目导航

热点推荐

阅览排行

当前位置：主页>网络编程>jsp教程>资讯:jsp+js实现可排序表格

jsp+js实现可排序表格

www.jz123.cn  2009-03-26   来源:   中国建站    责任编辑(袁袁)    我要投递新闻

　　首先，定义一个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里web.xml实现错误处理页面的制作404,和500 下一篇：如何建立JSP操作以提高数据库访问效率

相关文章列表

评论总数：1 条 [ 查看全部 ] 网友评论


关于我们 ┆ 隐私版权 ┆ 广告服务 ┆ 友情链接 ┆ 联系我们 ┆ 网站地图