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 –

Also need to include JS files –

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

$(document).ready(function() {
} );

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

NamePositionOfficeAgeStart dateSalary
Aanand JainSystem ArchitectEdinburgh612011/04/25$320,800
Gaurav kumarAccountantTokyo632011/07/25$170,750

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

Leave a Reply