How to integrate datatables and use datatables in bootstrap 5
By Ved Prakash N |
Jul 16, 2023 |
PHP
How to integrate datatables and use datatables in bootstrap 5
In this post, you will be learning how to integrate DataTables and also how to use DataTables with Bootstrap 5.
1 : We will be learning how to use DataTables (Without Bootstrap 5) as follows:
dataTables CSS CDN Link:
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css" />
dataTables JS CDN Link:
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
2. We will be learning how to use DataTables (with Bootstrap 5) as follows:
dataTables CSS CDN Link:
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" />
dataTables JS CDN Link with Bootstrap 5:
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
Add the code to script:
<script>
$(document).ready( function () {
$('#myTable').DataTable();
});
</script>
Now use this 'myTable' in the id attribute as id="myTable" in the html table tag as follows:
<table id="myTable">
</table>
Thanks for reading...