Introduction:
DataTables is a powerful jQuery plugin that provides advanced features for creating interactive and responsive data tables on web pages. When combined with the Bootstrap framework, DataTables can enhance the visual appeal and functionality of your tables. In this blog post, we will explore how to integrate DataTables with Bootstrap, covering various aspects from installation to customization, and provide practical examples along the way.
DataTables is a powerful jQuery plugin that allows you to enhance the functionality of HTML tables. When combined with Bootstrap, a popular front-end framework, you can create feature-rich and responsive data tables that look great and are user-friendly. In this blog post, we’ll guide you through the process of using DataTables with Bootstrap to create dynamic and interactive data tables for your web projects.
Setting Up DataTables and Bootstrap
1. Include Dependencies
To begin, you’ll need to include the necessary DataTables and Bootstrap dependencies in your HTML file’s <head> section. Make sure you include jQuery, DataTables, and Bootstrap CSS and JavaScript files.
<!DOCTYPE html>
<html>
<head>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include DataTables CSS and JavaScript -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- Include Bootstrap CSS and JavaScript -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Your DataTable will go here -->
</body>
</html>
Prerequisites:
To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with jQuery and the Bootstrap framework will be helpful but not mandatory.
Step 1: Setting Up the Environment: First, make sure you have the latest versions of jQuery, Bootstrap, and DataTables. You can either download them from their respective websites or include the CDN links in your HTML file.
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
<!-- Include the required JavaScript files -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>Step 2: Creating the HTML Markup:
Next, create a basic HTML table that will serve as the foundation for our DataTable.
<table id="myTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<!-- Add more columns if needed -->
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<!-- Add more rows if needed -->
</tbody>
</table>
Step 3: Initializing the DataTable:
Now, initialize the DataTable plugin on the table by adding the following script to your HTML file.
Step 4: Enhancing DataTables with Bootstrap Styling: To apply Bootstrap styling to the DataTable, add the ‘table’ class to the <table> tag and the ‘table-striped’ and ‘table-bordered’ classes for striped rows and bordered cells, respectively.
Step 5: Adding Advanced Features: DataTables provides various advanced features, such as pagination, searching, sorting, and more. You can easily enable these features by including additional options when initializing the DataTable.
<script>
$(document).ready(function() {
$('#myTable').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : false,
"bProcessing": true,
'pageLength' : 100,
'aLengthMenu' : [[100, 200, 500, -1],[100, 200, 500, "All"]],
"dom": 'Bfrtip',
"buttons": [
'pageLength',
{
extend: 'print',
autoPrint: false,
title: 'Notary List',
exportOptions: {
columns: ':visible'
}
},{
extend: 'pdf',
title: 'Notary List',
exportOptions: {
columns: ':visible'
}
},{
extend: 'excel',
title: 'Notary List',
exportOptions: {
columns: ':visible'
}
},{
extend: 'csv',
title: 'Notary List',
exportOptions: {
columns: ':visible'
}
},{
extend: 'copy',
exportOptions: {
columns: ':visible'
}
},
'colvis'
],
});
});
</script>Step 6: Customizing DataTable Appearance:
You can customize the appearance of the DataTable by modifying the Bootstrap classes or adding your own CSS styles. For example, you can change the color, font size, or width of the table.
