2010-11-06 37 views
0

我有一个简单的页面,我希望它是可排序的,所以我得到了jquery和tablesorter。我的继承人页:jQuery Tablesorter将无法在JSP上工作

<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> 

我在同一水平WEB-INF的JavaScript文件夹。我想我指出了正确的地方。但是当我加载页面时,没有任何反应,表格statys固定,没有排序。它可以与使用Spring MVC的事实相关联,并且映射使它指向错误的位置?我的继承人映射方法:

@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); 
} 

编辑:生成的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> 
+0

我们能否看到生成的实际HTML?你的页面能够加载JS文件吗? – 2010-11-06 22:57:18

+0

我不知道,生病发布html – onildo 2010-11-06 23:53:54

+0

我刚刚编辑并添加了HTML代码 – onildo 2010-11-06 23:59:17

回答

1

你有没有确认以下资源被正确送达? (例如,它们不是404,他们是正确的内容类型等)

  • /css/base.css
  • /javascript/jquery-1.4.3.js
  • /JavaScript的/ jquery.tablesorter.js

如果是这样,你有没有用过的东西,如Firefox的错误控制台以确保有在你的代码没有JavaScript错误?

另外,为什么你在你的表格中嵌入窗体似乎只是链接到一个带有ID的页面?换句话说,为什么不链接到页面?

+0

我检查了错误控制台,我得到的唯一错误是'$未定义' – onildo 2010-11-08 02:09:13

+0

我将jQuery核心引用更改为远程版本,并停止显示该错误。问题仍然存在,因为tablesorter是本地的。我无法获得正确的本地路径。 – onildo 2010-11-08 02:16:27

+0

所以,听起来好像三种资源没有得到正确的服务。这解释了您收到的错误消息,以及为什么当您链接到jQuery的远程副本时它消失了。我不熟悉Spring MVC,因此您可能需要查阅有关提供静态资源的文档。 – 2010-11-08 02:37:46