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 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts