CSV to jQuery DataTable [Bootstrap 3]

ByQyXd.markdown

CSV to jQuery DataTable [Bootstrap 3]

Creates a jQuery DataTable https://datatables.net/ from a CSV. Please see codepen for needed css and js files.

Forked from Captain Anonymous's Pen myrjqv.

A Pen by risingsunomi on CodePen.

License.

index.html

<div class="container-fluid">
		<div class="row">
			<div class="col-lg-8 col-sm-8 col-12">
				<form method="POST" action=".">
		            <h4>Upload Prospects</h4>
		            <div class="form-group">
		                <span class="input-group-btn">
		                    <span class="btn btn-primary btn-file">
		                        Browse&hellip; <input type="file">
		                    </span>
		                </span>
		                <input type="text" class="form-control" readonly>
		            </div>
		            <span class="help-block">
		                Upload one or more Prospect CSVs - Please limit only 25,000 entries at a time.
		            </span>
	           	</form>
	        </div>
		</div>
		<div class="row">
            <div class="col-lg-12" style="color: #000;">
                <table id="csvupload" class="table table-striped table-bordered" cellspacing="0" width="100%"></table>
            </div>
        </div>
        <div class="row">
        	<div class="col-lg-12" style="color: #000;">
        		<h3> JSON output </h3>
        		<textarea rows="4" cols="50" id="jsonout">&nbsp;</textarea>
        	</div>
	</div>

script.js

$(function(){
		function isDataTable ( nTable )
		{
		    var settings = $.fn.dataTableSettings;
		    for ( var i=0, iLen=settings.length ; i<iLen ; i++ )
		    {
		        if ( settings[i].nTable == nTable )
		        {
		            return true;
		        }
		    }
		    return false;
		}

		$(document).on('change', '.btn-file :file', function() {
			var input = $(this);
			var filename = input.val().replace(/^.*\\/, "");
			var ext = this.value.match(/\.(.+)$/)[1];
			if(isDataTable($("#csvupload")[0])){
				$("#csvupload").empty();
			}
			switch(ext){
				case 'csv':
					var client_data = [];
					var client_json = [];
					var client_mdata = [];
					label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
					input.trigger('fileselect', [label]);
					input.parse({
						config: {
							delimiter: ",",	// auto-detect
							newline: "",	// auto-detect
							header: true,
							dynamicTyping: false,
							preview: 0,
							encoding: "",
							worker: false,
							comments: false,
							step: function(results, handle){
								// collect row data from csv
								client_data.push(results.data[0]);
							},
							complete: function(results, file) {
								if(results.errors){
									console.log("Results.Errors:", results.errors);
								}

								// compile data for datatables from csv								
								for(var j = 0; j < (client_data.length-1); j++){
									var temp_cl = {};
									for(var i = 0; i < results.meta.fields.length; i++){
										var entry = client_data[j][String(results.meta.fields[i])];
										if(String(entry).length != 0){
											temp_cl[results.meta.fields[i]] = entry;
										}else{
											temp_cl[results.meta.fields[i]] = "<i>no data</i>";
										}	
									}
									client_json.push(temp_cl);
								}

								for(var i = 0; i < results.meta.fields.length; i++){
									client_mdata.push({
										"mDataProp": String(results.meta.fields[i]), 
										"sTitle": String(results.meta.fields[i]), 
										"sTargets": [i],
										"sType": "string"
									});
								}

								$('#csvupload').dataTable({
									destroy: true,
									"aaData": client_json,
									"aoColumns": client_mdata
								});

								$("textarea#jsonout").text(JSON.stringify(client_json));
							},
							error: function(err, file){
								console.log("ERROR:", err, file);
							},
							download: false,
							skipEmptyLines: false
						},
						error: function(err, file, inputElem, reason){
							console.log(err, file, inputElem, reason);
						},
						complete: function(results){
							bootbox.alert("Please check table and click submit if correct");
						}
					});
					break;
				default:
					bootbox.alert("Non-CSV files not allowed [File not allowed: " + filename + "]");
					this.value = '';	
			}
			
		});

		$('.btn-file :file').on('fileselect', function(event, label) {
			var input = $(this).parents('.form-group').find(':text');
			if( input.length ) {
				input.val(label);
			} else {
				if(log){ alert(label); }
			}
		});

	});

style.css

.btn-file {
	position: relative;
	overflow: hidden;
}
.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	font-size: 100px;
	text-align: right;
	filter: alpha(opacity=0);
	opacity: 0;
	background: red;
	cursor: inherit;
	display: block;
}
input[readonly] {
	background-color: white !important;
	cursor: text !important;
	position: absolute;
	top: 39px;
	left: 102px;
}

#csvupload_wrapper > div.row > div.col-sm-12 { overflow: auto;}