大家晚上好
我正在尝试将“datatables”jQuery 脚本添加到我的网站，但我根本无法让它工作!
根据阅读说明，我需要下载最新版本的 jQuery 产品并将其放入与我尝试使用它的页面相同的文件夹中。例如该文件位于 Pages > jquery-3.1.0.min.js
然后我应该将其包含在我正在使用的文件的标题中，请参阅下面代码中的“jQuery Link”注释
在此之后，我应该按照我想要的方式从构建器下载数据表，例如:https://datatables.net/download/ - 我选择了本地文件，因为该网站仅供内部使用，因此无需在线访问资源。所以现在我的文件夹结构看起来像 Pages > DataTables > ...
现在我将 JS 和 CSS 添加到标题中，并在下面的代码中看到“jQuery CSS”和“jQuery JS”注释
然后，我根据数据表的要求绘制表格，请参阅下面代码中的“表格开始”“表格结束”注释
然后我调用 JS，查看“Call script start”“Call script end”注释。
现在，当我运行此页面时，表格上根本没有格式？!
我确信我错过了一些非常简单的东西!
<!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>
最佳答案
您的代码似乎有效: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 生成的文件
关于javascript - 实现 jQuery 数据表的困难，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39440313/