【发布时间】：2015-09-25 15:38:13
【问题描述】：
我的目标是创建在 html 页面本身中采用内联 json 数据的页面；或提供上传按钮让用户选择他们选择的 json 文件。我已经从 YUI3 转移到了 Jquery，这对我来说有点挑战。我试过了，但是当我上传“details.txt”文件时，这并不令人耳目一新。
“更新评论：”
<!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.9.1.js' dataTables></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>
<script id="output" type="application/json"></script>
<div class="custom-file">
<span class="button">Choose a file</span>
<input type="file" id="file" />
</div>
<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[]" />
<hr>
<button id="read">Read</button>
<hr>
<!--button id="search-beginning">Find first</button>
<input type="text" id="find-first-pattern" placeholder="Regexp pattern" />
<button id="search-next">Find next</button>
-->
<hr>
<button id="searchAll">Find all</button>
<input type="text" id="find-all-pattern" placeholder="Regexp pattern" />
<hr>
<script type='text/javascript'>//<![CDATA[
var ajax="";
var fileselected="";
var olderfile="";
var data="";
var oTable="";
var firstDivContent="";
var secondDivContent="" ;
$(document).ready(function() {
alert("ready");
data=JSON.parse($("#data").text());
oTable = $('#example').dataTable({
destroy: true,
data : data.aaData
});
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 td img').on( 'click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.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
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
});
$('#file').change(function(){
//data=JSON.parse($("#output").html()) ;
olderfile=fileselected;
alert("We: "+olderfile);
fileselected =$(this).siblings('.text').text(this.value);
$(this).siblings('.text').text(this.value || 'Nothing selected');
fileselected = $('input[type=file]').val().replace(/.*(\/|\\)/, '');
if (olderfile!=fileselected && fileselected!="" ) {
alert("We: "+fileselected);
} else {
alert("No Changes Made ");
}
});
oTable.fnDraw();
});
$("#searchAll").click(function() {
//Destroy the added Data
oTable.dataTable().fnClearTable();
oTable.dataTable().fnDestroy();
alert("Destroyed");
data=JSON.parse(JSON.stringify($("#output").text()));
oTable = $('#example').dataTable({
destroy: false,
data : data.aaData
});
alert("Reinitialize Data");
oTable.fnDraw();
alert("Draw Data.aadata");
//oTable.api().ajax.reload();
//alert("Reload Data");
});
$(function() {
function LineNavigator(readChunk, decode, options) {
var self = this;
// verification
if (typeof (readChunk) != 'function') throw 'readChunk argument must be function(offset, length, callback)'
if (typeof (decode) != 'function') throw 'decode argument must be function(buffer, callback)'
// private
options = options ? options : {};
var milestones = options.milestones ? options.milestones : []; // { firstLine, lastLine, offset, length }
var chunkSize = options.chunkSize ? options.chunkSize : 1024 * 4;
var newLineCode = '\n'.charCodeAt(0);
var splitPattern = /\r?\n/;
// Searches for milestone
var getPlaceToStart = function (index) {
for (var i = milestones.length - 1; i >= 0; i--) {
if (milestones[i].lastLine < index)
return { firstLine: milestones[i].lastLine + 1, offset: milestones[i].offset + milestones[i].length };
}
return { firstLine: 0, offset: 0 };
}
// Count lines in chunk and offset of last line, saves milestones
var examineChunk = function(buffer, offset, bytesRead, firstLine) {
var saveMilestone = milestones.length == 0 || milestones[milestones.length - 1].offset < offset;
var lastLine = firstLine - 1;
var length = 0;
// Search for delimiters
for (var i = 0; i < bytesRead; i++) {
if (buffer[i] == newLineCode) {
lastLine++;
length = i + 1;
}
}
// Describe milestone
var milestone = {
firstLine: firstLine,
lastLine: lastLine,
offset: offset,
length: length
};
if (saveMilestone)
milestones.push(milestone);
// Describe beginning of next milestone
var milestoneClone = Object.create(milestone);
milestoneClone.place = { firstLine: lastLine + 1, offset: offset + length };
return milestoneClone;
};
// Get lines
var getLines = function(buffer, length, callback) {
decode(buffer.slice(0, length), function(text) {
var lines = text.split(splitPattern);
if (lines.length > 0 && lines[lines.length - 1] == "")
lines = lines.slice(0, lines.length - 1);
callback(lines);
});
};
// Search occurrences in line
function searchInLine(regex, line) {
var match = regex.exec(line);
return !match
? null
: {
offset: line.indexOf(match[0]),
length: match[0].length,
line: line
};
}
// Returns current milestones, to speed up file random reading in future
self.getMilestones = function() {
return milestones;
}
// Reads optimal number of lines
// callback: function(err, index, lines, eof)
self.readSomeLines = function(index, callback) {
var place = getPlaceToStart(index);
//offset, length, buffer, callback
readChunk(place.offset, chunkSize, function readChunkCallback(err, buffer, bytesRead) {
if (err) return callback(err, index);
var eof = bytesRead < chunkSize;
var inChunk = examineChunk(buffer, place.offset, bytesRead, place.firstLine);
// Wanted line in chunk
if (inChunk.firstLine <= index && index <= inChunk.lastLine) {
getLines(buffer, inChunk.length, function(lines) {
if (index != inChunk.firstLine)
lines = lines.splice(index - inChunk.firstLine);
callback(undefined, index, lines, eof);
})
// Wanted line not in this chunk
} else {
if (eof) return callback('Line ' + index + ' is out of index, last available: ' + inChunk.lastLine, index);
place = inChunk.place;
readChunk(place.offset, chunkSize, readChunkCallback);
}
})
};
// Reads exact amount of lines
// callback: function(err, index, lines, eof)
self.readLines = function(index, count, callback) {
var result = [];
self.readSomeLines(index, function readLinesCallback(err, partIndex, lines, eof) {
if (err) return callback(err, index);
result = result.concat(lines);
if (result.length >= count || eof)
return callback(undefined, index, result.splice(0, count), eof);
self.readSomeLines(partIndex + lines.length, readLinesCallback);
});
};
self.find = function(regex, index, callback) {
self.readSomeLines(index, function readSomeLinesHandler(err, firstLine, lines, eof) {
if (err) return callback(err);
for (var i = 0; i < lines.length; i++) {
var match = searchInLine(regex, lines[i]);
if (match) return callback(undefined, firstLine + i, match);
}
if (eof) return callback(undefined);
self.readSomeLines(firstLine + lines.length + 1, readSomeLinesHandler);
});
};
self.findAll = function(regex, index, limit, callback) {
var results = [];
self.readSomeLines(index, function readSomeLinesHandler(err, firstLine, lines, eof) {
if (err) return callback(err, index);
for (var i = 0; i < lines.length; i++) {
var match = searchInLine(regex, lines[i]);
if (match) {
match.index = firstLine + i;
results.push(match);
if (results.length >= limit)
return callback(undefined, index, true, results);
}
}
if (eof)
return callback(undefined, index, false, results);
self.readSomeLines(firstLine + lines.length + 1, readSomeLinesHandler);
});
};
}
// LineNavigator wrapper to work specifically with HTML5 File object
function FileNavigator (file) {
var self = this;
var size = file.size;
file.navigator = this; // reuse milestones later
var lastPosition = 0;
var getProgress = function() {
if (!size || size == 0) return 0;
var progress = parseInt(999 * (lastPosition / size));
return progress > 999 ? 999 : progress;
};
// callback(err, buffer, bytesRead)
var readChunk = function (offset, length, callback) {
lastPosition = offset + length;
var reader = new FileReader();
reader.onloadend = function(progress) {
var buffer;
if (reader.result) {
buffer = new Int8Array(reader.result, 0);
buffer.slice = buffer.subarray;
}
callback(progress.err, buffer, progress.loaded);
};
reader.readAsArrayBuffer(file.slice(offset, offset + length));
};
// callback(str);
var decode = function(buffer, callback) {
var reader = new FileReader();
reader.onloadend = function(progress) {
callback(progress.currentTarget.result);
};
reader.readAsText(new Blob([buffer]));
};
var navigator = new LineNavigator(readChunk, decode, { chunkSize: 1024 * 1024 * 4 });
// Returns current milestones, to speed up file random reading in future
self.getMilestones = navigator.getMilestones;
// Reads optimal number of lines
// callback: function(err, index, lines, eof, progress)
// where progress is 0-100 % of file
self.readSomeLines = function (index, callback) {
navigator.readSomeLines(index, function (err, index, lines, eof) {
callback(err, index, lines, eof, getProgress());
});
};
self.readLines = function (index, count, callback) {
navigator.readLines(index, count, function (err, index, lines, eof) {
callback(err, index, lines, eof, getProgress());
});
};
self.find = navigator.find;
self.findAll = navigator.findAll;
self.getSize = function(callback) {
return callback(file ? file.size : 0);
};
}
var started, finished;
function InitDemo(title) {
$('#meta').html('');
$('#output').html('');
if ( $('#file-select')[0].files.length == 0 || $('#file-select')[0].files[0] == null) {
$('#meta').html('Please, choose file!');
return null;
}
var file = $('#file-select')[0].files[0];
$('#meta').append(title + '<br>');
$('#meta').append('');
started = new Date();
finished = null;
return file;
}
function DemoFinished(metaInfo, results) {
$('#meta').append('' + (metaInfo ? '<br>' + metaInfo : ''));
$('#output').html(results ? results : '');
}
function Read() {
var file = InitDemo('');
if (!file) return;
var navigator = new FileNavigator(file);
var indexToStartWith = 0;
var countLines = 0;
navigator.readSomeLines(indexToStartWith, function linesReadHandler(err, index, lines, eof, progress) {
if (err) {
finished = new Date();
DemoFinished('Error: ' + err);
return;
}
countLines += lines.length;
if (eof) {
finished = new Date();
DemoFinished('');
return;
}
navigator.readSomeLines(index + lines.length, linesReadHandler);
});
};
$('#read').click(Read);
var nextIndex = 0;
function FindNext() {
var pattern = $('#find-first-pattern').val();
var file = InitDemo('Find of "' + pattern + '" pattern starting from ' + nextIndex);
if (!file) return;
var navigator = new FileNavigator(file);
navigator.find(new RegExp(pattern), nextIndex, function (err, index, match) {
finished = new Date();
nextIndex = index + 1; // search next after this one
if (err) {
DemoFinished('Error: ' + err);
return;
}
if (!match) {
DemoFinished('No matching lines found');
return;
}
var token = match.line.substr(match.offset, match.length);
DemoFinished('Found matching token on ' + index + ' line', index + ': ' + match.line.replace(token, '<mark>' + token + '</mark>'));
});
}
$('#search-beginning').click(function() {
nextIndex = 0;
FindNext();
});
$('#search-next').click(function() {
FindNext();
});
function FindAll() {
var pattern = $('#find-all-pattern').val();
var file = InitDemo('');
if (!file) return;
var navigator = new FileNavigator(file);
var indexToStartWith = 0;
var limitOfMatches = 999;
navigator.findAll(new RegExp(pattern), indexToStartWith, limitOfMatches, function (err, index, limitHit, results) {
finished = new Date();
if (err) {
DemoFinished('Error: ' + err);
return;
}
if (results.length == 0) {
DemoFinished('No matching lines found');
return;
}
var resultsAsLine = '';
for (var i = 0; i < results.length; i++) {
var token = results[i].line.substr(results[i].offset, results[i].length);
resultsAsLine += results[i].line.replace(token, '' + token + '') + '';
}
DemoFinished((limitHit ? ' Limit of ' + limitOfMatches + ' is hit, so there can be more lines.' : ''), resultsAsLine);
alert("Find All [Step 3] Called ");
});
data=JSON.parse(JSON.stringify($("#output").text()));
oTable = $('#example').dataTable({
destroy: true,
ajax: "data.json",
data : data.aaData
});
alert("Alert 4");
oTable.dataTable().fnClearTable();
alert("Alert 4 ClearTable");
oTable.dataTable().fnDestroy();
alert("Alert 4 DestroyTable");
//oTable.fnAddData(data);
oTable.fnDraw();
alert("Alert 5");
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;
}
alert("Alert 5.1");
setInterval( function () {
oTable.api().ajax.reload();
}, 30000 );
$('#example tbody td img').on( 'change', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
alert("Alert 5.2");
/* This row is already open - close it */
this.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
{
/* Open this row */
alert("Alert 5.3");
this.src = "../examples_support/details_close.png";
alert("5.3.1 this.src");
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
alert("Alert 5.4");
}
alert("Base Function [Step 3] ");
});
alert("Base Function [Step 2] ");
}
alert("('#searchAll').click(FindAll): Pre");
$('#searchAll').click(FindAll);
alert("('#searchAll').click(FindAll): Post");
//oTable.ajax.reload();
//$('#example').dataTable().ajax.reload();
});
alert("Step 1");
//data=JSON.parse(JSON.stringify($("#data").text()));
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 td img').on( 'click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.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
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
});
//]]>
</script>
</body>
</html>【问题讨论】：
-
我听说一些 JSON 解析器遇到制表符问题。看起来您在
iTotalRecords行前面有一个标签。 -
我已经删除了标签，但仍然无法使用
-
我整理了灵魂图。我将 Tag 克隆到 Json Source 声明并重新初始化表
标签： javascript jquery json datatables