jQuery Tablesorter在JSP上不起作用

Question

I have a simple page with a table and i want it to be sortable, so i got jquery and tablesorter. 我有一个带有表的简单页面，我希望它可以排序，所以我得到了jquery和tablesorter。 Heres my page: 这是我的页面：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="/css/base.css"/>
    <script src="/javascript/jquery-1.4.3.js" type="text/javascript"></script>
    <script src="/javascript/jquery.tablesorter.js" type="text/javascript"></script>
    <title>JSP Page</title>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#tabela").tableSorter();
        });
    </script>
</head>

<body>        
    <p>
        <label><h3>Lista de Personagens</h3></label>
    </p>
    <p>
        <a href="inserir.htm">Novo Personagem</a>
    </p>
    <table id="tabela" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <th>Codigo</th>
            <th>Nome</th>
            <th>Classe</th>
            <th colspan="3">Opções</th>
        </tr>
        <c:forEach items="${lista}" var="p">
            <tr>
                <td>${p.id}</td>
                <td>${p.nome}</td>
                <td>${p.classe}</td>
            <form id="formAlterar${p.id}" method="get" action="alterar.htm">
                <td>
                    <input type="hidden" name="id" value="${p.id}" />
                    <a href="#" onclick="document.getElementById('formAlterar${p.id}').submit()">Alterar</a>
                </td>
            </form>
            <form id="formConsultar${p.id}" method="post" action="consultar.htm">
                <td>
                    <input type="hidden" name="id" value="${p.id}" />
                    <a href="#" onclick="document.getElementById('formConsultar${p.id}').submit()">Consultar</a>
                </td>
            </form>
            <form id="formExcluir${p.id}" method="post" action="excluir.htm">
                <td>
                    <input type="hidden" name="id" value="${p.id}" />
                    <a href="#" onclick="document.getElementById('formExcluir${p.id}').submit()">Excluir</a>
                </td>
            </form>
        </tr>
    </c:forEach>
</table>

I have the javascript folder at the same level as WEB-INF. 我的JavaScript文件夹与WEB-INF处于同一级别。 I think i pointed to the right place. 我想我指出了正确的地方。 but when i load the page, nothing happens, the table statys fixed, no sorting. 但是当我加载页面时，什么也没有发生，表状态已修复，没有排序。 Can it be related to the fact im using Spring MVC and the mapping makes it point to the wrong location? 它可以与使用Spring MVC的即时消息有关，并且映射使其指向错误的位置吗？ Heres my mapped method: 这是我的映射方法：

@RequestMapping("/personagem/index.htm")
public ModelAndView listar(@RequestParam(value = "mensagem", required = false) String mensagem) {
    ArrayList<Personagem> lista = getPersonagemService().listarTodos();
    return new ModelAndView("listar", "lista", lista);
}

Edit: The generated HTML code (it's a bit long, so i cut off the repeating part): 编辑：生成的HTML代码（有点长，所以我剪掉了重复的部分）：

 <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" type="text/css" href="/css/base.css"/> 
    <script src="/javascript/jquery-1.4.3.js" type="text/javascript"></script> 
    <script src="/javascript/jquery.tablesorter.js" type="text/javascript"></script> 
    <title>JSP Page</title> 
    <script type="text/javascript"> 
        $(document).ready(function() {
            $("#tabela").tableSorter();
        });
    </script> 
</head> 

<body>        
    <p> 
        <label><h3>Lista de Personagens</h3></label> 
    </p> 
    <p> 
        <a href="inserir.htm">Novo Personagem</a> 
    </p> 
    <table id="tabela" border="1" cellspacing="0" cellpadding="0"> 
        <tr> 
            <th align="center">Nome</th> 
            <th align="center">Classe</th> 
            <th width="250" colspan="3">Opções</th> 
        </tr> 

            <tr> 
                <td width="150" align="center">Melys</td> 
                <td width="150" align="center">Priest</td> 
            <form id="formAlterar4" method="get" action="alterar.htm"> 
                <td align="center"> 
                    <input type="hidden" name="id" value="4" /> 
                    <a href="#" onclick="document.getElementById('formAlterar4').submit()">Alterar</a> 
                </td> 
            </form> 
            <form id="formConsultar4" method="post" action="consultar.htm"> 
                <td align="center"> 
                    <input type="hidden" name="id" value="4" /> 
                    <a href="#" onclick="document.getElementById('formConsultar4').submit()">Consultar</a> 
                </td> 
            </form> 
            <form id="formExcluir4" method="post" action="excluir.htm"> 
                <td align="center"> 
                    <input type="hidden" name="id" value="4" /> 
                    <a href="#" onclick="document.getElementById('formExcluir4').submit()">Excluir</a> 
                </td> 
            </form> 
        </tr>

Answer 1

Have you confirmed that the following resources are served properly? 您是否确认可以正确使用以下资源？ (eg, they aren't 404, they are the correct content type, etc.) （例如，它们不是404，它们是正确的内容类型，等等）

/css/base.css /css/base.css
/javascript/jquery-1.4.3.js /javascript/jquery-1.4.3.js
/javascript/jquery.tablesorter.js /javascript/jquery.tablesorter.js

If so, have you used something like the Firefox Error Console to ensure that there are no JavaScript errors in your code? 如果是这样，您是否使用Firefox错误控制台之类的方法来确保代码中没有JavaScript错误？

Also, why are you embedding forms in your table that appear to just link to a page with an id? 另外，为什么要在表格中嵌入看起来仅链接到具有ID的页面的表单？ In other words, why not just link to the page? 换句话说，为什么不只是链接到页面？

jQuery Tablesorter在JSP上不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2010-11-07 21:42:48

jQuery Tablesorter在JSP上不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2010-11-07 21:42:48

解决方案1
1 已采纳 2010-11-07 21:42:48