How to use Data tables in HTML code ?

Data tables are most efficient way to generate tables in your html code. Data tables is a jquery plugin for creating fully responsive table listings. It also provides search, sort and pagination. It gives developer a lot to customize according to the need.

I am going to use a basic example and it also ca be used to show data from the database.

We need to include below CSS –

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css

Also need to include JS files –

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

Call this function to generate data table. We will use table id in below jquery function.

$(document).ready(function() {
$('#example').DataTable();
} );

Yes, lets have a sample table for this example –

Final Output after merge the code. There might be some css issue that we can fix though

Please ask me anything in comment section and i will try to help out.