我正在使用 DataTables (http://www.datatables.net/)。
我正在使用下面的代码，但 DataTables 似乎没有初始化。我可以移动<script>到文档的顶部，然后它就可以工作，但我知道最好将它们放在文档的底部。
当我将它们移至文档底部时，它是否无法正常工作是否有原因？我想我正在以正确的顺序加载它们等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>
Test
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"serverSide": true,
"ajax": {
"url": "server_processing/test.php",
"type": "POST"
},
"order": [[ 0, "desc" ]]
} );
} );
</script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Test</a>
</div>
</div>
</div>
<div class="container">
<div class="page-header">
<h1 id="tables">Test</h1>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Invoice No</th>
<th>Order No</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
$('#example')
.removeClass( 'display' )
.addClass('table table-bordered');
</script>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
</body>
</html>
最佳答案
如果您在正文底部加载脚本标记，则还需要在这些脚本标记之后放置任何依赖代码。
在加载 jQuery 库之前，您当前正在尝试编译依赖于 jQuery 的代码。
将您自己的所有代码放在外部文件标记之后
关于javascript - 当 <script> 放置在文件末尾时，DataTables 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25308012/