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 –

table

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

Name Position Office Age Start date Salary
Aanand Jain System Architect Edinburgh 61 2011/04/25 $320,800
Gaurav kumar Accountant Tokyo 63 2011/07/25 $170,750

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

Add a Comment

Your email address will not be published. Required fields are marked *