6

我正在尝试在网站表单上实现 DataTables。我遇到了一些困难，所以我退后一步，尝试在一个非常基本的表上实现 DataTables。我使用的表格直接来自http://www.datatables.net/usage/。然后我调用了我认为需要的文件，但我仍然无法让 Datatables 在这个基本的表格上工作。我错过了什么？这是“练习”代码：

 <script type="text/javascript" charset="utf-8" src="/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="/media/js/jquery.dataTables.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="/media/src/DataTables.js"></script>-->

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
    $('#table').dataTable();
    } );
    </script> 
    <style type="text/css" title="currentStyle">
        @import "/media/css/jquery.dataTables.css";
    </style>
    <title>Untitled Document</title>

</head>


    <table id="table" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>
<body>
</body>
</html>

谢谢！

4

3 回答 3

5

js和css文件真的被加载了吗？您可以在 firefox 上使用 firebug 或在 webkit 浏览器中的开发工具中进行调试。（只需右键单击表格并选择“检查元素”）

此外， Microsoft Ajax CDN 上提供了DataTables 。与 jQuery相同

您可以尝试使用外部链接，看看它是否有效。像这样：

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

另请注意，使用外部库是一种很好的做法。

于 2012-12-05T22:21:30.737 回答
0

您必须在脚本中添加一个属性：“defer”。

<script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" defer ></script>
于 2021-05-26T20:30:56.890 回答
0

检查是否首先加载了 jQuery。然后检查 dataTables 资产是否正常工作。您可以使用警报功能进行检查，而不是在内部样式表中使用 @import，而是更喜欢使用

<link rel="stylesheet" type="text/css" href="filepath/style.css">

在我的博客中，您可以看到使用数据表的步骤和其他选项。

于 2018-03-11T09:59:09.133 回答