我正在努力在Bootstrap中创建一个DataTable。我严格按照插件文档中提到的步骤进行操作，可以在链接https://datatables.net/examples/styling/bootstrap4上找到该步骤，但是该方法无效。无需排序，搜索，分页就显示该表。
请帮忙。我不知道我在做什么错。
谢谢，
凤梨
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>DataTable</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
</head>
<body>
<div class="wrapper">
<div class="card">
<div class="card-body">
<h4 class="card-title">Table example</h4>
<h6 class="text-muted card-subtitle mb-2">Bootstrap datatable</h6>
<div class="table-responsive" style="width:100%">
<table class="table table-bordered table-striped" id="table" style="width:100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="assets/js/custom.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</body>
</html>
最佳答案
问题在于已加载的JS文件的排序。
它一定要是：
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="assets/js/custom.js"></script>
由于引导程序需要jQuery，而数据表也需要jQuery，因此必须首先加载它。
如果以后再加载它，将导致错误。
因此，您的完整代码应如下所示：
$(document).ready(function() {
$('#table').DataTable();
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>DataTable</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
</head>
<body>
<div class="wrapper">
<div class="card">
<div class="card-body">
<h4 class="card-title">Table example</h4>
<h6 class="text-muted card-subtitle mb-2">Bootstrap datatable</h6>
<div class="table-responsive" style="width:100%">
<table class="table table-bordered table-striped" id="table" style="width:100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>