Bootstrap DataTable doesn't work as described in plugin docs
Question
I'm struggling to create a DataTable in Bootstrap. I followed exactly the steps mention in the plugin documentation, which can be found at the link https://datatables.net/examples/styling/bootstrap4 , but doesn't work. The table is displayed whithout sorting, search, paging.
Please help. I don't know what I'm doing wrong.
Thank you, Anamaria
<!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>
1 answers
solution1
4 ACCPTED 2019-07-24 06:35:22
The problem is with the sequencing of JS files you have loaded.
It has to be:
<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>
As bootstrap needs jQuery and DataTables also needs jQuery, so it must be loaded first.
If you will load it later, it would result in error.
So, your complete code should work as follows:
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.