Export HTML Table Data to Excel, CSV and Text using jQuery

Data export is a common feature to save data in a local file for further use. Generally we export data into our desired file format using server side languages and its very tedious. If you’re not prefer server side data export functionality, then you can handle data export at front-end using jQuery. The data export at front-end is very easy and fast. So if you’re looking for functionality to export data at front-end using jQuery, then you’re here at right place.

In this tutorial you will learn how to export HTML Table data into Excel, CSV and Text using jQuery. The tutorial explained in easy steps with live demo and also download source code of live demo.

Also, read:

As we have covered this tutorial with live demo to to export HTML Table data into Excel, CSV and Text using jQuery, so the file structure for this example is following.

index.php
custom_export.js

Steps1: Create MySQL Database Table
As we will display dynamic data record in HTML Table from MySQL database, so first first we will create MySQL table developers and then insert few records to display.

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;

Steps2: Include jQuery and tableExport plugin
As we will handle HTML Table data export using jQuery plguin tableExport, so we will include jQuery and plugin files in index.php.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="tableExport/tableExport.js"></script>
<script type="text/javascript" src="tableExport/jquery.base64.js"></script>
<script src="js/custom_export.js"></script>

Steps3: Create HTML Table with Data from MySQL
Then we will create HTML Table in index.php with dynamic data records from MySQL table developers to export table data. We will also design drop down list of export options to export data into different file types.

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

Steps4: Implement HTML Table Data Export
Finally in custom_export.js, we will handle functionality to export HTML Table data into CSV, Excel and Text format using jQuery plugin tableExport. We will call jQuery plugin function .tableExport() on click event to export HTML table data.

$( document ).ready(function() {
	$(".export").click(function() {
		var export_type = $(this).data('export-type');		
		$('#data_table').tableExport({
			type : export_type,			
			escape : 'false',
			ignoreColumn: []
		});		
	});
});

Latest Tutorials

Popular Tags