我可以通过PHP或普通的txt文件在DataTables中调用远程Json资源。但是我的服务器有严格的限制，我生成随机HTML文件，并将其json数据嵌入到html页面本身。
我已经尝试过了：
I want to create links in record fields in DataTables from JSON data
和
因为，我需要将远程数据源转换为单个HTML文件中的内联数据源，如何才能完成。我没有添加内联HTML的问题。
我希望复制以下内容：
http://datatables.net/examples/server_side/row_details.html
使用内联json数据
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="file:///E:/Downloads/FireFox/DataTables-1.9.4/DataTables-1.9.4/examples/examples_support/jquery.tooltip.js"></script>
<script type="text/javascript" language="javascript" src="file:///E:/Downloads/FireFox/DataTables-1.9.4/DataTables-1.9.4/examples_support/jquery-ui-tabs.js"></script>
<script id="data" type="application/json">
{
"sEcho": 1,
"iTotalRecords": "57",
"iTotalDisplayRecords": "57",
"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"
},
{
"0": "<img src='details_open.png'>",
"1": "Trident",
"2": "Internet Explorer 4.0",
"3": "Win 95+",
"4": "4",
"5": "X",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Tasman",
"2": "Internet Explorer 4.5",
"3": "Mac OS 8-9",
"4": "-",
"5": "X",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Trident",
"2": "Internet Explorer 5.0",
"3": "Win 95+",
"4": "5",
"5": "C",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Tasman",
"2": "Internet Explorer 5.1",
"3": "Mac OS 7.6-9",
"4": "1",
"5": "C",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Tasman",
"2": "Internet Explorer 5.2",
"3": "Mac OS 8-X",
"4": "1",
"5": "C",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Trident",
"2": "Internet Explorer 5.5",
"3": "Win 95+",
"4": "5.5",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Trident",
"2": "Internet Explorer 6",
"3": "Win 98+",
"4": "6",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Trident",
"2": "Internet Explorer 7",
"3": "Win XP SP2+",
"4": "7",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Webkit",
"2": "iPod Touch / iPhone",
"3": "iPod",
"4": "420.1",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "KHTML",
"2": "Konqureror 3.1",
"3": "KDE 3.1",
"4": "3.1",
"5": "C",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "KHTML",
"2": "Konqureror 3.3",
"3": "KDE 3.3",
"4": "3.3",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "KHTML",
"2": "Konqureror 3.5",
"3": "KDE 3.5",
"4": "3.5",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Misc",
"2": "Links",
"3": "Text only",
"4": "-",
"5": "X",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Misc",
"2": "Lynx",
"3": "Text only",
"4": "-",
"5": "X",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Mozilla 1.0",
"3": "Win 95+ / OSX.1+",
"4": "1",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Mozilla 1.1",
"3": "Win 95+ / OSX.1+",
"4": "1.1",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Mozilla 1.2",
"3": "Win 95+ / OSX.1+",
"4": "1.2",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Mozilla 1.3",
"3": "Win 95+ / OSX.1+",
"4": "1.3",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Mozilla 1.4",
"3": "Win 95+ / OSX.1+",
"4": "1.4",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Mozilla 1.5",
"3": "Win 95+ / OSX.1+",
"4": "1.5",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Mozilla 1.6",
"3": "Win 95+ / OSX.1+",
"4": "1.6",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Mozilla 1.7",
"3": "Win 98+ / OSX.1+",
"4": "1.7",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Mozilla 1.8",
"3": "Win 98+ / OSX.1+",
"4": "1.8",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Misc",
"2": "NetFront 3.1",
"3": "Embedded devices",
"4": "-",
"5": "C",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Misc",
"2": "NetFront 3.4",
"3": "Embedded devices",
"4": "-",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Netscape 7.2",
"3": "Win 95+ / Mac OS 8.6-9.2",
"4": "1.7",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Netscape Browser 8",
"3": "Win 98SE+",
"4": "1.7",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Netscape Navigator 9",
"3": "Win 98+ / OSX.2+",
"4": "1.8",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Presto",
"2": "Nintendo DS browser",
"3": "Nintendo DS",
"4": "8.5",
"5": "C/A<sup>1</sup>",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Presto",
"2": "Nokia N800",
"3": "N800",
"4": "-",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Webkit",
"2": "OmniWeb 5.5",
"3": "OSX.4+",
"4": "420",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Presto",
"2": "Opera 7.0",
"3": "Win 95+ / OSX.1+",
"4": "-",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Presto",
"2": "Opera 7.5",
"3": "Win 95+ / OSX.2+",
"4": "-",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Presto",
"2": "Opera 8.0",
"3": "Win 95+ / OSX.2+",
"4": "-",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Presto",
"2": "Opera 8.5",
"3": "Win 95+ / OSX.2+",
"4": "-",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Presto",
"2": "Opera 9.0",
"3": "Win 95+ / OSX.3+",
"4": "-",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Presto",
"2": "Opera 9.2",
"3": "Win 88+ / OSX.3+",
"4": "-",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Presto",
"2": "Opera 9.5",
"3": "Win 88+ / OSX.3+",
"4": "-",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Presto",
"2": "Opera for Wii",
"3": "Wii",
"4": "-",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Misc",
"2": "PSP browser",
"3": "PSP",
"4": "-",
"5": "C",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Webkit",
"2": "S60",
"3": "S60",
"4": "413",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Webkit",
"2": "Safari 1.2",
"3": "OSX.3",
"4": "125.5",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Webkit",
"2": "Safari 1.3",
"3": "OSX.3",
"4": "312.8",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Webkit",
"2": "Safari 2.0",
"3": "OSX.4+",
"4": "419.3",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Webkit",
"2": "Safari 3.0",
"3": "OSX.4+",
"4": "522.1",
"5": "A",
"extra": "hrmll"
},
{
"0": "<img src='details_open.png'>",
"1": "Gecko",
"2": "Seamonkey 1.1",
"3": "Win 98+ / OSX.2+",
"4": "1.8",
"5": "A",
"extra": "hrmll"
}
]
}
</script>
<script type="text/javascript" charset="utf-8">
var oTable;
/* Formating function for row details */
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;
}
$(document).ready(function() {
/*** for Tabs April 24th 2014 **/
/*
$("#tabs").tabs( {
"show": function(event, ui) {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
}
} );
*/
/** **/
oTable = $('#example').dataTable( {
"bProcessing": true,
// "sScrollY": "200px",
// "bScrollCollapse": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
// "sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
// "sDom": 'RC<"clear">lfrtip',
"sDom": 'T<"clear">lfrtip<"clear spacer">T',
"bServerSide": false,
//"sAjaxSource": "scripts/details_col.txt",
"aoColumns": [
{ "mData": "0", "sClass": "center", "bSortable": false},
{ "mData": "1"},
{ "mData": "2"},
{ "mData": "3"},
{ "mData": "4"},
{ "mData": "5"}
/** { },
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" }
**/
],
"aaSorting": [[1, 'asc']]
} );
$('#example tbody td img').live( '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' );
}
} );
/**** Not Used ****/
/*
oTable.$('td').hover( function() {
var iCol = $('td', this.parentNode).index(this) % 5;
$('td:nth-child('+(iCol+1)+')', oTable.$('tr')).addClass( 'highlighted' );
}, function() {
oTable.$('td.highlighted').removeClass('highlighted');
} );
*/
/**** ****/
} );
</script> <style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/header.ccss";
@import "../../media/css/demo_table.css";
@import "../../media/css/demo_table_jui.css";
@import "../examples_support/jquery.tooltip.css";
@import "../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
thead input { width: 100% }
input.search_init { color: #999 }
.ui-tabs .ui-tabs-panel { padding: 10px },
</style><body id="dt_example" class="ex_highlight">
<div id="container">
<div class="full_width big">
DataTables server-side processing example with hidden row information
</div>
<h1>Preamble</h1>
<p>This example shows how you might modify the client-side show/hide details rows example for use with DataTables server-side processing option.</p>
<h1>Live example</h1>
<div id="dynamic">
<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>
</div>
</body>
</html>
答案 0 :(得分：2)
提取<script id="data>..</script>的内容并将其转换为JSON：
var data = JSON.parse($("#data").text());
oTable = $('#example').dataTable({
data : data.aaData,
...
})
在这里工作 - ＆gt; http://jsfiddle.net/rvwe28pq/ （已更新）
更新：已更新小提琴，因此它现在可以处理生成子行的代码。那应该是它。注意：live()已弃用，请改用on()。