JQuery Datatables ne fonctionne pas

Je suis nouveau sur JQuery. Je suis en train de créer un datatabale mais sa ne fonctionne pas. Toutes les fonctionnalités de travaux à l'exception de la datatable fonctionnalité. Qui est, la table est affiché avec les informations correctes mais le Tri, la pagination, etc ne fonctionne pas. J'ai copié les médias et le dossier des scripts à partir de la téléchargé le plugin code dans ma webapp. S'il vous plaît laissez-moi savoir ce qui pourrait mal tourner.
J'ai téléchargé le Datatable plugin à partir de ce lien
http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications

Et ci-dessous mon fichier jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/jsp/common/include.jsp"%>
<%@ page import ="java.util.Date" %>
<html>
<head>
<title>Subscriptions List</title>
<link href="${RESOURCE_ROOT}/css/usersubs.css" rel="stylesheet" type="text/css" />
<link href="/media/dataTables/demo_page.css" rel="stylesheet" type="text/css" />
<link href="/media/dataTables/demo_table.css" rel="stylesheet" type="text/css" />
<link href="/media/dataTables/demo_table_jui.css" rel="stylesheet" type="text/css" />
<link href="/media/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<link href="/media/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
<script src="/scripts/jquery.js" type="text/javascript" ></script>
<script src="/scripts/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#subscriptionlist").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
});
</script>
</head>
<body>
<div id="subscriptionsList">
<table id="subscriptionlist">
<thead>
<tr>
<th>Subscription Name</th>
<th>Type</th>
<th>Last Updated</th>
<th>Creation Date</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<c:forEach var="subscription" items="${subList}">
<tr>
<td>${subscription.name}</td>
<td>${subscription.type}</td>
<td>${subscription.lastUpdateDt}</td>
<td>${subscription.createDt}</td>
<td><a href="${CONTEXT_ROOT}subscription/delete/id/${subscription.id}/${subscription.user.id}" class="show-hand-cursor">Delete</a></td>
</tr>       
</c:forEach>
</tbody>        
</table>
<div style="width:100%; margin-top:0px;">
<table border="0px">
<tr>
<td style="padding-top:25px"; align="right" class="noborder"> <button >Add Subscription</button></td>
</tr>
</table>
</div>
<div>
</div>
</div>
</body>
</html>

Le code HTML que je reçois sont en dessous de

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<title>Subscriptions List</title>
<link href="/cv-subscription-web/resources/css/usersubs.css" rel="stylesheet" type="text/css" />
<link href="/media/dataTables/demo_page.css" rel="stylesheet" type="text/css" />
<link href="/media/dataTables/demo_table.css" rel="stylesheet" type="text/css" />
<link href="/media/dataTables/demo_table_jui.css" rel="stylesheet" type="text/css" />
<link href="/media/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<link href="/media/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
<script src="/scripts/jquery.js" type="text/javascript" ></script>
<script src="/scripts/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#subscriptionlist").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
});
</script>
</head>
<body>
<div id="subscriptionsList">
<table id="subscriptionlist">
<thead>
<tr>
<th>Subscription Name</th>
<th>Type</th>
<th>Last Updated</th>
<th>Creation Date</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>EQ549_author3</td>
<td>EqWireArticle</td>
<td>Wed Nov 07 02:46:20 EST 2012</td>
<td>Wed Nov 07 02:46:20 EST 2012</td>
<td><a href="/cv-subscription-web/subscription/delete/id/50c0b59781ce4dd6efab7e14/dd32261" class="show-hand-cursor">Delete</a></td>
</tr>       
<tr>
<td>EQ549_author4</td>
<td>EqWireArticle</td>
<td>Wed Nov 07 02:46:20 EST 2012</td>
<td>Wed Nov 07 02:46:20 EST 2012</td>
<td><a href="/cv-subscription-web/subscription/delete/id/50c5f96581ce1243814edb11/dd32261" class="show-hand-cursor">Delete</a></td>
</tr>       
<tr>
<td>EQ_author7</td>
<td>EqWireArticle</td>
<td>Wed Nov 07 02:46:20 EST 2012</td>
<td>Wed Nov 07 02:46:20 EST 2012</td>
<td><a href="/cv-subscription-web/subscription/delete/id/50c64dc181ce1243814edb14/dd32261" class="show-hand-cursor">Delete</a></td>
</tr>       
<tr>
<td>EQ_author6</td>
<td>EqWireArticle</td>
<td>Wed Nov 07 02:46:20 EST 2012</td>
<td>Wed Nov 07 02:46:20 EST 2012</td>
<td><a href="/cv-subscription-web/subscription/delete/id/50c64dc481ce1243814edb15/dd32261" class="show-hand-cursor">Delete</a></td>
</tr>       
<tr>
<td>EQ_author8</td>
<td>EqWireArticle</td>
<td>Wed Nov 07 02:46:20 EST 2012</td>
<td>Wed Nov 07 02:46:20 EST 2012</td>
<td><a href="/cv-subscription-web/subscription/delete/id/50c64dc981ce1243814edb16/dd32261" class="show-hand-cursor">Delete</a></td>
</tr>       
</tbody>        
</table>
<div style="width:100%; margin-top:0px;">
<table border="0px">
<tr>
<td style="padding-top:25px"; align="right" class="noborder"> <button >Add Subscription</button></td>
</tr>
</table>
</div>
<div>
</div>
</div>
</body>
</html>

Merci beaucoup!

  • Des erreurs dans la console JavaScript? Aussi, vous pouvez poster le code HTML que vous obtenez dans le navigateur, pas la JSP qui est sur le serveur?
  • Non, la façon dont vous la création de votre table à l'aide de JSTL c:forEach est baaad... mieux utiliser sAjaxSource et de pointer vers un servlet qui va retourner un tableau json...
  • J'ai mis à jour le post avec la sortie HTML. Daniel, Merci pour votre suggestion, je vais essayer ça.
  • Bon, j'ai construit un violon ici qui trie des beaux -- je ne vois pas les tables de données.css dans votre code n'importe où, mais qui ne devrait pas nuire à la fonctionnalité, peut-être que votre dataTables.min.js n'est-ce pas là où vous pensez que c'est?
  • Ouais vous avez raison, Il est impossible de trouver en quelque sorte. Il est capable de trouver le usersubs.css qui est dans mon dossier de ressources et dont je suis le référencement à l'aide de ${RESOURCE_ROOT} qui constitue le <link href="/cv-abonnement web//resources/css/usersubs.css" dans la sortie HTML.... J'ai changé le fichier jsp <link href="${RACINE_CONTEXTE}/media/dataTables/demo_page.css" parce que les médias le dossier est en dehors du dossier de ressources... Mais il ne le trouve même si maintenant le code HTML de sortie de l'affiche en tant que <link href="/cv-abonnement web//media/dataTables/demo_page.css"
  • Tentez de lier à la CSS et JS fichiers Microsoft CAN à la place: datatables.net/blog/Microsoft_CDN
  • Hey son travail maintenant. J'ai déplacé les médias et les scripts dans le dossier mon dossier de ressources. Et utilisé le ${RESOURCE_ROOT} pour y accéder, et sa fonctionne très bien maintenant. Je ne sais pas pourquoi ! Je vais également examiner Microsoft CDN option maintenant. Merci 🙂

InformationsquelleAutor NewQueries | 2012-12-11
  1. 1

    J'ai construit un violon ici qui trie des beaux -- je ne vois pas le dataTables.css dans votre code n'importe où, mais qui ne devrait pas nuire à la fonctionnalité.

    La cause la plus probable est que votre dataTables.min.js fichier n'est pas trouvé. Si vous rencontrez des problèmes de fixation, vous pouvez essayer de liaison à la Microsoft CDN pour les tables de données à la place: http://datatables.net/blog/Microsoft_CDN

    InformationsquelleAutor Blazemonger