How to use datatable in bootstrap 5

Hi 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.

Bootstrap, Datatable, 5

All the best 👍