CSV Loader

CSV Loader.markdown

CSV Loader

• This will enables you to list out csv file in to table
  • bootstrapped for better view
  • developed to load metadata dynamically
  • required files(jquery.min.js, boostrap library, index.html)
  • created on 01-07-2015

index.html

<div class='container' id=''>
   <h1 id='loader'>Loading...</h1>
   
   <div class='row'>
   <h1 id='loader'>CSV Loader</h1>
   <div class='bs-component' id='_csvLoader'>
   
   </div>
   </div>
   </div>

script.js

/*
												~~~~*csvloader.JS*~~~
---------------------------------------------------------------------------------------------------------------------------------
                                                                                 
	* This will enables you to list out csv file in to table
	* bootstrapped for better view
	* developed to load metadata dynamically
	* required files(jquery.min.js, boostrap library, index.html)	
	* author:@akhil                                                              
	* created on 01-07-2015                               
                                                                                 
---------------------------------------------------------------------------------------------------------------------------------
*/

$(document).ready(function() {
    $("#loader").hide();
    $.ajax({
        type: "GET",
        url: "data.csv",
        dataType: "text",
        beforeSend: function() {
            $("#loader").show();
        },
        success: function(data) {
            processData(data);
            $("#loader").hide();
        },
        error: function(e) {
            alert(e.statusText);
            console.log(e);
        }
    });
});

function processData(allText) {
    var allTextLines = allText.split("\n");
    var table_data = [];
    var table_row = [];
    var data_row = [];

    for (var i = 0; i < allTextLines.length; i++) {
        data_row = allTextLines[i].split(",");
        table_row = [];
        
		$.each(data_row, function(key, val) {

		
            table_row.push("<td id='" + key + "'>" + val + "</td>");
			
			
        });

        table_data.push("<tr>" + table_row.join("") + "</tr>");


    }


    $("#_csvLoader").html("<table class='table table-striped table-hover'>" + table_data.join("") + "</table>");

}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700);

h1,h2,h3,h4,h5,h6{
font-family: 'Oxygen', sans-serif;
font-weight:300;
color:#2469a5;
text-transform:uppercase;
}



.pdt_container {
  position: relative;
  margin: 10px 10px 0px 0px;
  width: 100%;
  height: 22em;;
  z-index: 1;  
  padding: 0px;
  float: left;
 perspective: 1000;

}
._ProductList{    -webkit-transition: 0.6s ease;
  -moz-transition: 0.6s ease;
  -ms-transition: 0.6s ease;
  -o-transition: 0.6s ease;
  transition: 0.6s ease;}

.navbar-form .form-control{border:0px;}

.pdt_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 0.5s linear;
	box-shadow:0px 2px 10px #ccc;
  border-radius: 5px;
      -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.pdt_card .rating{width:100%;text-align:center;color:#ff9900;padding:10px 0px;float:left;display:none;}
.pdt_card .pdt,.pdt_card ._img_pdt {
text-align: center;
  color: #fff;
  /* font-size: 4em; */
  padding: 10px 0px;
  display: block;
  margin: 0px auto;
  background: #164B79;
  float: left;
}



.pdt_card .pdt img {
  margin: 5px auto;
  display: block;
  border-radius: 100%;
 width:80px;
 height:80px;
 
}

.pdt_card h4 {
    text-align: center;
  color: #fff;
  margin: 10px auto;
  font-weight: 300;
  padding: 0px 10px;
  float: left;
  width: 100%;
  height: 5em;
  /* background-color: #eef; */
}
.pdt_card h2 a{width: 80px;
  height: 80px;
  border-radius: 100%;
  background: #E56767;
  padding: 25px 0px;
  
  display: block;
  margin: 0px auto;
  text-align: center;
  font-size: 0.8em;color:#fff;}
.pdt_card h2 {
    display: block;
  float: left;
  text-align: center;
  width: 100%;
  margin: 10px auto;
  font-weight: 300;
  padding: 0px 0px;
}

.col-lg-4:hover .pdt_card,
.pdt_container:hover .pdt_card 
{
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: #fff;
  border-radius:0px;
  border-bottom:2px solid #ff9900;
}

.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 0px;
  background-color: #fff;
}

.face.back ._content {
  display: block;
  width: 100%;
  float: left;
  height:18em;overflow-y:scroll;
   padding: 10px;
}
.face.back ._content ._course{float:left;width:100%;
border-bottom:1px solid #eee;padding:5px 0px;color:#222;}
.face.back ._content ._course .SCOTitle{float:left;width:80%;margin:0px;					color:#333;}
.face.back ._content ._course .SCOPrice{float:right;width:10%;margin:0px 0px 0px 0px;		color:#333;}
.face.back ._content ._course input{float:right;width:10%;margin:5px 0px 0px 0px;;}


.face.back ._btns_buy {
  display: block;
  width: 100%;
  float: left;
  background:#eee;
  padding:10px;
}
.footer h4{color:#ff9900;}
.footer a{color:#fff;font-size:0.8em;text-transform:uppercase;}
.footer{
background:#2a5e8a;
padding:20px 0px 100px 0px;
color:#fff;
margin: 20px 0 0 0;
}
.bottom-bar{width:100%;bottom:0px;position:fixed;background:rgba(0, 0, 0, 0.76);height:auto;z-index:1600000;margin:0px;padding:0px;}
.bottom-bar ._close{float:left;opacity:1;background:#ff0000;color:#fff;font-weight: 100;}
.bottom-bar ._open{  /* float: none; */
  padding: 0px;
  opacity: 1;
  background: #00A8FF;
  color: #fff;
  position: absolute;
  left: 0px;
  border: 0px;
  top: -30px;
  height: 30px;
  width: 30px;
  display: none;}
  #btn-cart .item{
  position: absolute;
  width: 20px;
  height: 20px;
  background: red;
  color: #fff;
  font-size: 0.8em;
  text-align: center;
  border-radius: 100%;
  top: -5px;
  /* left: -5px; */
  padding-top: 3px;}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />