无法解析手动上传Json文件

时间：2015-09-25 15:38:14

标签： javascript jquery json datatables

我的目标是创建一个页面，该页面可以在html页面本身中获取内联json数据;或者提供上传按钮让用户选择他们选择的json文件。我已经从YUI3搬到了Jquery，对我来说有些挑战。我尝试了但是当我上传“details.txt”文件时，这并不令人耳目一新。

“更新评论：” 

async Task<object> AAA(int a)
{
    await Task.Delay(a);
    return null;
}

1 个答案:

答案 0 :(得分：0)

最后我能够解决他的问题。谢谢Stackoverflow和Jsfiddle.net 

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
 <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.3.js'></script>
 
 <link rel="stylesheet" type="text/css" href="https://fiddle.jshell.net/css/normalize.css"> 
 <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 <link rel="stylesheet" type="text/css" href="https://fiddle.jshell.net/css/result-light.css">
   <link rel="stylesheet" type="text/css" href="https://cdn.dataTables.net/1.10.0/css/jquery.dataTables.css">
   <script type='text/javascript' src="https://cdn.dataTables.net/1.10.9/js/jquery.dataTables.js"></script>  
	 
</head>
<body> 
 <script id="data" type="application/json">
{ "sEcho": 1,"iTotalRecords": "11","iTotalDisplayRecords": "11","aaData": [  { "0": "<img src='details_open.png'>", "1": "Other browsers", "2": "All others",  "3": "-",  "4": "-",  "5": "U",  "extra": "hrmll"  },  {   "0": "<img src='details_open.png'>",  "1": "Trident",  "2": "AOL browser (AOL desktop)",  "3": "Win XP",  "4": "6",  "5": "A",  "extra":"hrmll"   },  {  "0": "<img src='details_open.png'>",  "1": "Gecko",  "2": "Camino 1.0",  "3": "OSX.2+",  "4": "1.8",  "5": "A",  "extra": "hrmll"  },  {  "0": "<img src='details_open.png'>",  "1": "Gecko",  "2": "Camino 1.5",  "3": "OSX.3+",  "4": "1.8",  "5": "A",  "extra": "hrmll"  },  {  "0": "<img src='details_open.png'>",  "1": "Misc",  "2": "Dillo 0.8",  "3": "Embedded devices",  "4": "-",  "5": "X",  "extra": "hrmll"  },  {  "0": "<img src='details_open.png'>",  "1": "Gecko",  "2": "Epiphany 2.20",   "3": "Gnome",  "4": "1.8",  "5": "A",  "extra": "hrmll"  },  {  "0": "<img src='details_open.png'>",  "1": "Gecko",  "2": "Firefox 1.0",  "3": "Win 98+ / OSX.2+",  "4": "1.7",  "5": "A",  "extra": "hrmll"  },  {  "0": "<img src='details_open.png'>",  "1": "Gecko",  "2": "Firefox 1.5",  "3": "Win 98+ / OSX.2+",  "4": "1.8",  "5": "A",  "extra": "hrmll"  },  {  "0": "<img src='details_open.png'>",  "1": "Gecko",  "2": "Firefox 2.0",  "3": "Win 98+ / OSX.2+",  "4": "1.8",  "5": "A",  "extra": "hrmll"  },  {  "0": "<img src='details_open.png'>",  "1": "Gecko",  "2": "Firefox 3.0",  "3": "Win 2k+ / OSX.3+", "4": "1.9",   "5": "A",  "extra": "hrmll"  },  {  "0": "<img src='details_open.png'>",  "1": "Misc",  "2": "IE Mobile",  "3": "Windows Mobile 6",  "4": "-",  "5": "C",  "extra": "hrmll"  } ] }
 </script> 

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th width="4%"></th>
			<th width="25%">Rendering engine</th>
			<th width="20%">Browser</th>
			<th width="25%">Platform(s)</th>
			<th width="16%">Engine version</th>
			<th width="10%">CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="5" class="dataTables_empty">Loading data from server</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th></th>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</tfoot>
</table>
 
<div id="meta"></div><br>


<input id="file-select" type="file" name="files[]" onchange="onFileSelected(event)" />
<script type='text/javascript'>//<![CDATA[

var ajax="";
var fileselected="";
var olderfile="";
var data="";
var oTable="";
  var firstDivContent="";
  var secondDivContent="" ;
	
	
function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var result = document.getElementById("data");

  reader.onload = function(event) {
    result.innerHTML = event.target.result;
  };

reader.readAsText(selectedFile);
  reload();
  reload();
}
	
function reload(){ 
oTable.api().clear();
oTable.dataTable().fnClearTable();	
oTable.dataTable().fnDestroy();
//alert("datatable cleared");
/*[{"0":"<img src='details_open.png'>","1":"Other browsers","2":"All others","3":"-","4":"-","5":"U","extra":"hrmll"},{"0":"<img src='details_open.png'>","1":"Trident","2":"AOL browser (AOL desktop)","3":"Win XP","4":"6","5":"A","extra":"hrmll"},{"0":"<img src='details_open.png'>","1":"Gecko","2":"Camino 1.0","3":"OSX.2+","4":"1.8","5":"A","extra":"hrmll"}]*/
 ///data=JSON.parse(updated);  

//Destroy the added Data
//oTable.dataTable().fnClearTable();
//alert("Cleared");
//oTable.dataTable().fnDestroy();
//alert("Destroyed");

 data=JSON.parse($("#data").text()); 

oTable = $('#example').dataTable({
	destroy:true,
	data : data.aaData
	}); 

oTable.api().clear();
oTable.dataTable().fnClearTable();	
//oTable.dataTable().fnDestroy();	

alert("Re-Initialized");
oTable.fnAddData(data.aaData);
oTable.fnDraw(); 
}	

$(window).load(function(){	
//$(document).ready(function() {
 alert("ready");
 alert(data);
 data=JSON.parse($("#data").text());
 if(data!=""){
 alert('Inside OnReady');
 oTable = $('#example').dataTable({

 "processing": true,

 data : data.aaData
}); 
alert('Inside OnReady: Table Initialized	');
}
 alert("ready oTable Created");

 
function fnFormatDetails ( nTr ) {
  var aData = oTable.fnGetData( nTr );
  var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
  sOut += '<tr><td>Rendering engine:</td><td>'+aData[2]+' '+aData[5]+'</td></tr>';
  sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
  sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
  sOut += '</table>';
 
  return sOut;
}

//live is deprcated
$('#example tbody').on( 'click',  'td',function (e) {
  var myImage = $(this).find("img");
  alert('myImage'+myImage);
  var nTr = this.closest('tr');
    alert('nTr='+nTr); //[object HTMLTableRowElement]
	
  if ( oTable.fnIsOpen(nTr) )
  {
  
  myImage.src = "../examples_support/details_open.png";
  //this.src = "http://l.yimg.com/rz/d/yahoo_news_en-US_s_f_p_168x21_news.png";
  oTable.fnClose( nTr );
  }
  else
  {
  
  myImage.src = "../examples_support/details_close.png";
  oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
  }

		 alert("ready oTable refreshed");
  });
    	
 alert("ready oTable Data added");
//This is not required as we are populating for the 1st time.
//oTable.fnAddData(data);	
//oTable.fnDraw();		

});	

$(function() {
alert("('#searchAll').click(FindAll): Pre");
//document.getElementById("data").appendChild(oldFile);
//$('#searchAll').click(FindAll);
$('window').load();	
alert("('#searchAll').click(FindAll): Post");	
});

//]]> 

</script>
</body>
</html>

相关问题
最新问题