0
J'ai une page simple avec une table et je veux qu'elle soit triable, donc j'ai jquery et tablesorter. Heres ma page:jQuery Tablesorter ne fonctionnera pas sur 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>
Je le dossier javascript au même niveau que WEB-INF. Je pense que j'ai pointé au bon endroit. mais quand je charge la page, rien ne se passe, les statistiques de la table sont fixes, pas de tri. Est-ce que cela peut être lié au fait que j'utilise Spring MVC et que le mapping indique le mauvais emplacement? Heres ma méthode cartographié:
@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: Le code HTML généré (il est un peu long, donc je couper la partie à répéter):
<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>
Pourrions-nous voir le code HTML généré? Votre page est-elle capable de charger les fichiers JS? –
Je ne sais pas, ill poster le html – onildo
Je viens d'éditer et ajouté le code HTML – onildo