Skip to main content

Export HTML Table to Excel using jQuery

Updated on: coderszine team jQuery, Tutorial

In our previous tutorial, we have explained how to implement export data to excel using PHP and get huge response from our readers. Many of them requested to publish tutorial to export HTML table data to excel file with jQuery.

Data Export is a feature to allow users to download data to local file for future use. Mostly we implement data export functionality using server side like languages like PHP etc.

So in this tutorial you will learn how to export HTML table to Excel using jQuery. The tutorial covered with live demo to populate dynamic data into HTML table from MySQL and then download HTML table data to excel using jQuery to excel file. You can also download source code of live demo.

Also, read:

So let’s create example to export html table data to excel with jQuery. The file structure for the example is following.

  • index.php
  • script.js

Steps1: Create MySQL Database Table

As we are going to handle this tutorial to export HTML table data to excel using jQuery, so first we will populate HTML table with dynamic data from MySQL database table. So we will create MySQL database table developers using below query.

CREATE TABLE `developers` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `skills` varchar(255) NOT NULL,
  `address` varchar(255) NOT NULL,
  `gender` varchar(255) NOT NULL,
  `designation` varchar(255) NOT NULL,
  `age` int(11) NOT NULL,
  `image` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

we will also insert few records to table using below query to display into HTML table.

INSERT INTO `developers` (`id`, `name`, `skills`, `address`, `gender`, `designation`, `age`, `image`) VALUES
(1, 'Smith', 'Java', 'Newyork', 'Male', 'Software Engineer', 34, 'image_1.jpg'),
(2, 'David', 'PHP', 'London', 'Male', 'Web Developer', 28, 'image_2.jpg'),
(3, 'Rhodes', 'jQuery', 'New Jersy', 'Male', 'Web Developer', 30, 'image_2.jpg'),
(4, 'Sara', 'JavaScript', 'Delhi', 'Female', 'Web Developer', 25, 'image_2.jpg'),
(5, 'Shyrlin', 'NodeJS', 'Tokiyo', 'Female', 'Programmer', 35, 'image_2.jpg'),
(12, 'Jay', 'PHP', 'Delhi, India', 'Male', 'Web Developer', 30, 'image_3.jpg');

Steps2: Include jQuery and Plugin

As we will use jQuery plugin table2excel to handle HTML table data export to excel file, so we need to include jQuery and plugin file in index.php file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="dist/jquery.table2excel.min.js"></script>

Steps3: Create HTML Table and Display Records

In index.php, we will create HTML table with heading and then populate table records from MySQL database table developers. We will also create a button below table to export HTML table data to excel on button click.

<table id="my_table" width="100%">
	<thead>
		<tr>
			<th>Id</th>
			<th>Name</th>
			<th>Age</th>
			<th>Gender</th>
			<th>Address</th>
			<th>Designation</th>
			<th>Skills</th>               
		</tr>
	</thead>       
	<tbody>
		<?php			
		$sql_query = "SELECT id, name, gender, skills, address, designation, age FROM developers LIMIT 6";
		$resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
		while( $developer = mysqli_fetch_assoc($resultset) ) {
		?>
		<tr>
			<td><?php echo $developer['id']; ?></td>
			<td><?php echo $developer['name']; ?></td>
			<td><?php echo $developer['gender']; ?></td>
			<td><?php echo $developer['skills']; ?></td>
			<td><?php echo $developer['address']; ?></td>
			<td><?php echo $developer['designation']; ?></td>
			<td><?php echo $developer['age']; ?></td>
		</tr>	
		<?php } ?>
	</tbody>
</table>

Steps4: Implement Export HTML Table to Excel with jQuery

Now in script.js, we will handle functionality to export HTML table data to excel using jQuery. As we have used jQuery plugin table2excel for exporting HTML table data to excel, so we will call plugin function table2excel() on export button click. The plugin has multiple options to customize HTML table data export to excel, so we have used these options to handle HTML table data export to excel file.

$(document).ready(function(){
	$("#export_to_excel").click(function(){
		$("#my_table").table2excel({			
			exclude: ".noExl",
			name: "Developer data",
			filename: "coderszine_table_data",
			fileext: ".xls",		
			exclude_img: true,
			exclude_links: true,
			exclude_inputs: true			
		}); 
	});
});

You may also like:

You can view the live demo from the Demo link and can download the source from the Download link below.
Demo Download