JQuery DataTable not working
14,471
I built a fiddle here which sorts fine -- I don't see the dataTables.css in your code anywhere, but that shouldn't impair functionality.
The most likely cause is that your dataTables.min.js file isn't being found. If you're having trouble fixing that, you might try linking to the Microsoft CDN for dataTables instead: http://datatables.net/blog/Microsoft_CDN
Author by
NewQueries
Updated on June 30, 2022Comments
-
NewQueries almost 2 years
I am new to JQuery. I am trying to create a datatabale but its not working. All the functionality works except the datatable functionality. That is, the table is being displayed with correct data but the Sorting, pagination etc does not work. I have copied the media and scripts folder from the downloaded plugin code in my webapp folder. Please let me know what might have gone wrong. I have downloaded the Datatable plugin from this link http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications
And below is my jsp file
<!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>The HTML that I am getting is below
<!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>Thanks a lot!