How to integrate datatables and use datatables in bootstrap 5

By Ved Prakash N | Jul 16, 2023 | PHP
Share : Whatsapp

https://www.fundaofwebit.com/post/how-to-integrate-datatables-and-use-datatables-in-bootstrap-5

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