Are you looking to enhance your web applications with a powerful and user-friendly data presentation component? In this comprehensive guide, we’ll take you on a journey into the world of web development by demonstrating how to create a Bootstrap 5 DataTable with Sort, Search, and Pagination Options.
Whether you’re a seasoned web developer or just starting your coding adventure, this tutorial will equip you with the skills to build an elegant and feature-rich table for displaying and managing tabular data. Join us as we explore the integration of Bootstrap 5 and DataTables to craft a dynamic and responsive data table that will elevate your web projects to the next level.
Let’s embark on this exciting web development journey and unlock the potential of your data-driven applications!”
Step 1: Add Required CDNs
In the first step, we’ll include the necessary CDNs (Content Delivery Networks) for Bootstrap, jQuery, and DataTables in your HTML file. These libraries provide the foundational elements for our DataTable.
Please include these two CSS CDNs in the <head> tag.
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css
Please include these Javascript CDNs before the end of body tab
https://code.jquery.com/jquery-3.6.0.min.js https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js
Step 2: Create the HTML Structure
Now, let’s create the HTML structure for your DataTable. In this example, we’ll include a container, a table with an id attribute (myDataTable), and the table headers and body.
<div class="container mt-5"> <h1>Bootstrap DataTable Example</h1> <table id="myDataTable" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>25</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>30</td> <td>Los Angeles</td> </tr> <tr> <td>Alice Johnson</td> <td>28</td> <td>Chicago</td> </tr> <tr> <td>Robert Brown</td> <td>35</td> <td>Houston</td> </tr> <tr> <td>Lisa Davis</td> <td>29</td> <td>Miami</td> </tr> <tr> <td>Michael Wilson</td> <td>40</td> <td>Seattle</td> </tr> <tr> <td>Emily Clark</td> <td>27</td> <td>Denver</td> </tr> <tr> <td>David Lee</td> <td>32</td> <td>San Francisco</td> </tr> <tr> <td>Sarah White</td> <td>33</td> <td>Boston</td> </tr> <tr> <td>James Anderson</td> <td>31</td> <td>Atlanta</td> </tr> <tr> <td>Lisa Davis</td> <td>29</td> <td>Miami</td> </tr> <tr> <td>Michael Wilson</td> <td>40</td> <td>Seattle</td> </tr> <tr> <td>Emily Clark</td> <td>27</td> <td>Denver</td> </tr> <tr> <td>David Lee</td> <td>32</td> <td>San Francisco</td> </tr> <tr> <td>Sarah White</td> <td>33</td> <td>Boston</td> </tr> <tr> <td>James Anderson</td> <td>31</td> <td>Atlanta</td> </tr> <!-- Add more rows as needed --> </tbody> </table> </div>
Step 3: Include JavaScript Code
Now, let’s include the JavaScript code to initialize the DataTable and enable the desired features like sorting, searching, and pagination.
$(document).ready(function() {
// Initialize DataTable
$('#myDataTable').DataTable({
paging: true, // Enable pagination
searching: true, // Enable search
ordering: true, // Enable sorting
info: true, // Show information
lengthChange: false, // Disable the "Show X entries" dropdown
});
});
Step 4: Add Custom CSS (Optional)
Bootstrap table comes with pre defined css but you can adjust the styles of any table using custom css.
That’s it! By following these steps, you’ll have a functional Bootstrap 5 DataTable with Sort, Search, and Pagination Options in your web application. You can further customize the appearance and behavior of the DataTable by modifying the DataTable options and adding your own styles in the provided CSS section.
