Export HTML Table Data into Excel using jQuery
Export HTML Table Data into Excel using jQuery
Description: Hi every one today i am going to explain how to export the html table data into excel using jQuery . So our goal is when ever the user click on Export to Excel button then the html table data has to been download into excel.
What is a jQuery?
jQuery is client side programming language and used in different ways such form validations, event handling at client side, json data processing ect.
Prerequisites :
To start this demo you must familiar with html and jQuery. Don't worry even if you are not familiar with them i am here to explain you in detail.
1) Download the jquery-1.10.2.js
Download
Step 1:
1) Create a new folder for our project and name it as splessonsdemo
2) Create a two more folders under splessonsdemo and name as fellow css and js.
Here we use css folder to save our css files and js folder used to save our js if we do so our project will be clean and easy accessible.
Step 2:
Copy jquery-1.10.2.js and jquery.battatech.excelexport.min.js and past it in our project js folder. Create a new text file in our project js folder and rename New Text Document.txt to customjs.js
Step 3: Copy the bellow code and past it into to customjs.js file and save it.
[js] $(function(){
$("#export_excel_button").click(function () {
$("#export_excel_table").btechco_excelexport({
containerid: " export_excel_table "
, datatype: $datatype.Table
});
});
});
[/js]
Step 4 : Create a new text file in our project folder splessonsdemo and rename New Text Document.txt to splessonsdemo.html
Step 5:
Copy the bellow code and past it into splessonsdemo.html page and save.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Export HTML Table Data into Excel using jQuery -SPLessons </title>
</head>
<body>
<input type="button" id="export_excel_button" value="Export To Excel" />
<table id="export_excel_table">
<caption > <h4> Export HTML Table Data into Excel using jQuery </h4> </caption>
<tbody><tr> <th> Year </th> <th> Term </th> <th> College </th> <th> Department </th> <th> Major </th> <th> Awarded </th> <th> Unawarded </th> <th> Total Applied </th> </tr><tr><td>2013</td><td>Spring</td><td>Global</td><td>CSE</td><td>IT</td><td>11</td><td>12</td><td>23</td> </tr><tr><td>2014</td><td>Fall</td><td>Global</td><td>Electrical</td><td>ECE</td><td>23</td><td>12</td><td>35</td> </tr><tr><td>2013</td><td>Fall</td><td>JBIT</td><td>Electrical</td><td>ECE</td><td>12</td><td>98</td><td>110</td> </tr><tr><td>2010</td><td>Spring</td><td>HiTech</td><td>Computers</td><td>CS</td><td>32</td><td>15</td><td>47</td> </tr><tr><td>2011</td><td>Fall</td><td>HiTech</td><td>Computers</td><td>IT</td><td>32</td><td>64</td><td>96</td> </tr>
</tbody></table>
<!-- JavaScript -->
<script type="text/javascript" src="js/jquery-1.10.2.js" ></script>
<script type="text/javascript" src="js/jquery.battatech.excelexport.min.js" > </script>
<script type="text/javascript" src="js/customjs.js"></script>
</body>
</html>
[/html]
Step 6 : Open the splessonsdemo.html in browser. That's it.
Summer :
[js] $(function(){
$("#export_excel_button").click(function () {
$("#export_excel_table").btechco_excelexport({
containerid: " export_excel_table "
, datatype: $datatype.Table
});
});
});
[/js]
So our goal is when ever the user click on Export to Excel button then the html table data has to been download into excel. Here we have a button ( id="export_excel_button") and table (id="export_excel_table") in our splessonsdemo.html. Bind the button with click event and Bind the html table to our plugin function named as btechco_excelexport.
