Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Anamaria Costin
Anamaria Costin
17,472 Points
Posted by Anamaria Costin
Anamaria Costin
17,472 Points

Bootstrap 4 DataTable

Hello,

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.

Here is the HTML code:

<!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>

Custom.js file includes the init function: $(document).ready(function() { $('#example').DataTable(); } );

Please help. I don't know what I'm doing wrong.

Thank you, Anamaria

1 Answer

Anamaria Costin
Anamaria Costin
17,472 Points
Anamaria Costin
Anamaria Costin
17,472 Points

Got it! The problem was the script order. Bootstrap and DataTables need jQuery, so it must be loaded first.