How to use datatable in bootstrap 5
May 02, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we will create simple bootstrap 5 datatables.
Here, we will be using the .datatable class to make a datatable in Bootstrap.
Table of contents
- Framework and cdn link
- Div element and define its class name
- Included JS 3 bootstrap
- Add JavaScript in
<script>tag
This article will guide you to adding to break the paragraphs in Bootstrap with example.
Step 1: Framework and cdn link
First of all, load the Bootstrap 5 framework CSS into the head tag of your webpage.
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"> Step 2: Div element and define its class name
After that, create the break with a class name .w-100.
<table id="example" class="table table-striped table-bordered" style="width:100%">
<div class="container mt-4">
<table id="datatable" class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>createdAt</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jhon doe</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>2</td>
<td>smae</td>
<td>[email protected]</td>
<td>10/11/22</td>
</tr>
<tr>
<td>3</td>
<td>Jhon doe3</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>4</td>
<td>Jhon doe4</td>
<td>[email protected]</td>
<td>10/10/24</td>
</tr>
<tr>
<td>5</td>
<td>Jhon doe5</td>
<td>[email protected]</td>
<td>10/10/21</td>
</tr>
</tbody>
</table>
</div>Step 3: included JS 5 bootstrap
Now, load the Bootstrap JavaScript file before closing the body tag and done.
<!--Bootstrap JS included-->
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>Step 4: Add JavaScript in <script> tag
Add the following JavaScript in <script> tag after the <body> tag to specify ‘HH:mm:ss’ format to DatePicker.
$(document).ready(function() {
$('#datatable').DataTable();
});Example.
Let’s look at the following example to understand how it basically works:
<!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.0" />
<title>Bootstrap 5 Simple Datatable Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<div class="container mt-4">
<table id="datatable" class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>createdAt</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jhon doe</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>2</td>
<td>smae</td>
<td>[email protected]</td>
<td>10/11/22</td>
</tr>
<tr>
<td>3</td>
<td>Jhon doe3</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>4</td>
<td>Jhon doe4</td>
<td>[email protected]</td>
<td>10/10/24</td>
</tr>
<tr>
<td>5</td>
<td>Jhon doe5</td>
<td>[email protected]</td>
<td>10/10/21</td>
</tr>
</tbody>
</table>
</div>
<!-- bootstrap5 dataTables js cdn -->
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#datatable').DataTable();
});
</script>
</body>
</html>In the above code, we have used .datatable class to datatable in bootstrap
Check the output of the above code example.
All the best 👍