【问题标题】:jQuery Tablesorter won't work on JSPjQuery Tablesorter 不适用于 JSP
【发布时间】:2010-11-06 22:34:17
【问题描述】:

我有一个带有表格的简单页面,我希望它是可排序的,所以我得到了 jquery 和 tablesorter。这是我的页面:

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

我的 javascript 文件夹与 WEB-INF 处于同一级别。我想我指出了正确的地方。但是当我加载页面时,没有任何反应,表格状态固定,没有排序。它是否与我使用 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> 

【问题讨论】:

  • 我们能看到生成的实际 HTML 吗?你的页面能加载JS文件吗?
  • 我不知道,我把 html 贴出来
  • 我刚刚编辑并添加了 HTML 代码

标签: jquery jsp spring-mvc tablesorter


【解决方案1】:

您是否确认以下资源已正常提供? (例如,它们不是 404,它们是正确的内容类型等)

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

如果是这样,您是否使用过类似 Firefox 错误控制台 来确保代码中没有 JavaScript 错误?

另外,为什么要在表格中嵌入看起来只是链接到具有 id 的页面的表单?换句话说,为什么不直接链接到页面呢?

【讨论】:

  • 我检查了错误控制台,我得到的唯一错误是'$未定义'
  • 我将 jQuery 核心引用更改为远程版本,它停止显示该错误。问题仍然存在,因为 tablesorter 是本地的。我无法正确获取本地路径。
  • 所以,听起来这三个资源没有得到正确的服务。这解释了您收到的错误消息以及为什么当您链接到 jQuery 的远程副本时它消失了。我对 Spring MVC 不熟悉,因此您可能需要查阅提供静态资源的文档。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-10-23
  • 1970-01-01
  • 1970-01-01
  • 2012-09-10
  • 2017-12-11
  • 1970-01-01
  • 2016-03-19
相关资源
最近更新 更多