JQuery DataTable not working

Question

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!

Any errors in the JavaScript console? Also, can you post the HTML that you get in the browser, not the JSP that's on the server? — Blazemonger
– Blazemonger, Commented Dec 11, 2012 at 18:00
Unrelated, the way you creating your table using JSTL c:forEach is baaad... better use sAjaxSource and point it to a servlet that will return a json array... — Daniel
– Daniel, Commented Dec 11, 2012 at 18:33
@Blazemonger I have updated post with the HTML output. Daniel Thanks for your suggestion, I will try that out. — NewQueries
– NewQueries, Commented Dec 11, 2012 at 18:57
Okay, 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 -- perhaps your dataTables.min.js isn't where you think it is? — Blazemonger
– Blazemonger, Commented Dec 11, 2012 at 19:04
@Blazemonger Yeah you are right, It is unable to find it somehow. It is able to find the usersubs.css which is in my resources folder and which I am referencing using ${RESOURCE_ROOT} which forms the <link href="/cv-subscription-web//resources/css/usersubs.css" in HTML output.... I changed the jsp file to <link href="${CONTEXT_ROOT}/media/dataTables/demo_page.css" because the media folder is outside the resources folder... But it cannot find it even though now the HTML output displays it as <link href="/cv-subscription-web//media/dataTables/demo_page.css" — NewQueries
– NewQueries, Commented Dec 11, 2012 at 19:35

Blazemonger · Accepted Answer · 2012-12-11 19:54:21Z

1

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

answered Dec 11, 2012 at 19:54

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery DataTable not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related