堆栈内存溢出
  简体   繁体   English

jQuery DataTable不起作用

[英]JQuery DataTable not working

 原文  2012-12-11 17:56:37  9   1    jquery/ jsp/ datatables

问题描述

I am new to JQuery. 我是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. 我已经从下载的插件代码复制了我的webapp文件夹中的media和scripts文件夹。 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 我已经从此链接http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications下载了Datatable插件

And below is my jsp file 下面是我的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>

The HTML that I am getting is below 我得到的HTML如下 

<!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! 非常感谢！

1 个解决方案

解决方案1
 1 已采纳  2012-12-11 19:54:21

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. 我在这里构建了一个小提琴，该小提琴很好-我的代码在任何地方都看不到dataTables.css ，但这不会影响功能。

The most likely cause is that your dataTables.min.js file isn't being found. 最可能的原因是找不到您的dataTables.min.js文件。 If you're having trouble fixing that, you might try linking to the Microsoft CDN for dataTables instead: http://datatables.net/blog/Microsoft_CDN 如果无法解决该问题，则可以尝试链接到dataTables的Microsoft CDN： http : //datatables.net/blog/Microsoft_CDN

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用jquery构建的数据表无法正常工作 - Datatable built with jquery not working jQuery DataTable不适用于流星 - JQuery DataTable not working on Meteor jquery 数据表在 Firefox 中不起作用 - jquery datatable not working in firefox jQuery DataTable aaColomn无法正常工作 - jQuery DataTable aaColomn not working jQuery数据表选择不起作用 - jquery datatable select not working jQuery的数据表PageLength不工作 - JQuery Datatable PageLength Not Working jQuery DataTable插件不起作用 - jquery DataTable plugin is not working jQuery数据表搜索不起作用 - Jquery datatable searching is not working jQuery数据表在php中不起作用 - jQuery datatable not working in php jQuery datatable操作不起作用 - Jquery datatable Action is not working
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM