jQuery Tablesorter 无法在 JSP 上运行
我有一个带有表格的简单页面，我希望它可以排序，所以我有 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>
I have a simple page with a table and i want it to be sortable, so i got jquery and 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. 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? 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):
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您是否确认以下资源正常提供？ （例如，它们不是 404，它们是正确的内容类型等）
如果是这样，您是否使用过某些东西像 Firefox 错误控制台 一样确保您的代码中没有 JavaScript 错误？
另外，为什么您要在表格中嵌入表单，而这些表单似乎只是链接到带有 id 的页面？换句话说，为什么不直接链接到该页面呢？
Have you confirmed that the following resources are served properly? (e.g., they aren't 404, they are the correct content type, etc.)
If so, have you used something like the Firefox Error Console to ensure that there are no JavaScript errors in your code?
Also, why are you embedding forms in your table that appear to just link to a page with an id? In other words, why not just link to the page?