Question

晚上好，

我正在尝试将“datatables”jQuery脚本添加到我的网站，但我根本无法让它工作！

从阅读说明我需要下载最新版本的jQuery生成并放入与我尝试使用它的页面相同的文件夹。例如该文件位于Pages＆gt;的jquery-3.1.0.min.js

我应该在我正在使用的文件的标题中包含这个，请参阅下面的代码中的“jQuery Link”注释

在此之后，我应该从构建器中下载数据表，例如：https://datatables.net/download/ - 我选择了本地文件，因为该站点仅供内部使用，因此无需在线访问资源。所以现在我的文件夹结构看起来像Pages＆gt; DataTables＆gt; ...

所以现在我将JS和CSS添加到标题中，并在下面的代码中看到“jQuery CSS”和“jQuery JS”注释

然后根据数据表的要求绘制表格，参见下面的代码中的“表格开始”“表格结束”评论

然后我调用JS看到“Call script start”“Call script end”comments。

现在，当我运行此页面时，桌面上根本没有格式化？！

我确信我错过了一些非常简单的事情！

<!DOCTYPE html>
<head>
    <!-- jQuery Link -->
    <script src="jquery-3.1.0.min.js"></script>

    <!--jQuery CSS -->
    <link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">

    <!--jQuery JS -->
    <script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>
</head>
<body>

<!-- Table start -->
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>
<!-- Table end -->

<!-- Call script start -->
<script>
$(document).ready( function () {

$('#table_id').DataTable()

} );
</script>
<!-- Call script end -->
</body>

</html>

Answer 1

您的代码似乎有效：http://jsfiddle.net/ohy2xtud/是否有控制台输出？也许你有问题，包括你的脚本/样式表。您确定/DataTables/datatables.js是引用脚本文件的正确方法（与css相同）吗？你可以查看web根目录的DataTables文件夹，而不是像jQuery文件那样查看项目目录。

我会尝试远程包含您的链接：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js

https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.css

https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.js

那应该有用。如果可行，您仍然可以下载它们。对于本地文件提供，您需要告诉我们确切的项目结构。所有脚本和样式表都与HTML文件位于同一目录中吗？您也可以尝试在本地使用CDN版本，而不是使用datatables.net生成的文件

Answer 2

如果使用Bootstrap 3，则将table类添加到表标记中，否则您必须提供自己的样式。尝试添加这样的链接标记来导入bootstrap并添加类：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

难以实现jQuery数据表

2 个答案: