Friday, 21 April 2017

CSV File to HTML Table Using AJAX jQuery



This is the simple web tutorial in which We are going to learn how to import CSV file into HTML table by using Jquery Ajax method. In simple words we will parse CSV file data and display into HTML table format on web page by using Ajax JQuery method. Here We will not use any JQuery plugin or library for read CSV file and display CSV file data in HTML table. We all know CSV stands for Comma Separated Values file format and in this we have store data in string format which are separated by comma. This format file we can also open excel also so it is widely used for exchange data between application.

Here We have one file which we have stored in our working folder and we want to read data from that CSV file by using Ajax and after getting data in string format we will convert into HTML table by using Jquery. If you have developed any web application and you want to load data from CSV file then you can follow this code in which we do not have used any server side script but we have used simply client side script like Ajax and JQuery. This will not increase load on your system. In this script we will not upload CSV file on our system but we will only give CSV file into Ajax request. So Via Ajax request we can get data from CSV file and by using JavaScript we will converted into HTML table code.

Here we have perform all operation at client side, so no load has been come on our server. By using this script we can load large number of data from CSV file to HTML table. This type of feature is very useful if you have build some large project in which if you want to reduce load on database server, then you have so load some data from CSV file, so it will reduce some on database server. So, this our simple tutorial in which we have display CSV file in HTML Table on web page.








Source Code


index.html



<!DOCTYPE html>
<html>
 <head>
  <title>CSV File to HTML Table Using AJAX jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <div class="table-responsive">
    <h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>
    <br />
    <div align="center">
     <button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
    </div>
    <br />
    <div id="employee_table">
    </div>
   </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $('#load_data').click(function(){
  $.ajax({
   url:"employee.csv",
   dataType:"text",
   success:function(data)
   {
    var employee_data = data.split(/\r?\n|\r/);
    var table_data = '<table class="table table-bordered table-striped">';
    for(var count = 0; count<employee_data.length; count++)
    {
     var cell_data = employee_data[count].split(",");
     table_data += '<tr>';
     for(var cell_count=0; cell_count<cell_data.length; cell_count++)
     {
      if(count === 0)
      {
       table_data += '<th>'+cell_data[cell_count]+'</th>';
      }
      else
      {
       table_data += '<td>'+cell_data[cell_count]+'</td>';
      }
     }
     table_data += '</tr>';
    }
    table_data += '</table>';
    $('#employee_table').html(table_data);
   }
  });
 });
 
});
</script>


employee.csv



Name,Address,Gender,Designation,Age
John Smith,656 Edsel Road Sherman Oaks CA 91403,Male,Manager,40
Clara Berry,63 Woodridge Lane Memphis TN 38138,Male,Programmer,22
Barbra K. Hurley,1241 Canis Heights Drive Los Angeles CA 90017,Female,Service technician,26
Antonio J. Forbes,403 Snyder Avenue Charlotte NC 28208,Male,Falling,32
Charles D. Horst,1636 Walnut Hill Drive Cincinnati OH 45202,Male,Financial investigator,29
Beau L. Clayton,3588 Karen Lane Louisville KY 40223,Male,Extractive metallurgical engin,33
Ramona W. Burns,2170 Ocala Street Orlando FL 32801,Female,Electronic typesetting machine operator,27
Jennifer A. Morrison,2135 Lakeland Terrace Plymouth MI 48170,Female,Rigging chaser,29
Susan Juarez,3177 Horseshoe Lane Norristown PA 19403,Male,Control and valve installe,52
Ellan D. Downie,384 Flynn Street Strongsville OH 44136,Female,Education and training manager,26
Larry T. Williamson,1424 Andell Road Brentwood TN 37027,Male,Teaching assistant,30
Lauren M. Reynolds,4798 Echo Lane Kentwood MI 49512,Female,Internet developer,22
Joseph L. Judge,3717 Junkins Avenue Moultrie GA 31768,Male,Refrigeration mechanic,35
Eric C. Lavelle,1120 Whitetail Lane Dallas TX 75207,Male,Model,21
Cheryl T. Smithers,1203 Abia Martin Drive Commack NY 11725,Female,Personal banker,23
Tonia Diaz,4724 Rocky Road Philadelphia PA 19107,Female,Facilitator,29
Stephanie P. Lederman,2117 Larry Street Waukesha WI 53186,Female,Mental health aide,27
Edward F. Sanchez,2313 Elliott Street Manchester NH 03101,Male,Marine oilerp,28
Peter Parker,403 Snyder Avenue Charlotte NC 28208,Male,Programmer,28
John Smith,384 Flynn Street Strongsville OH 44136,Male,Web Developer,25
Mark Boucher,256 Olive Street NY,Male,Techbical Assistance,23

0 comments:

Post a Comment