3

I can call remote Json resource in DataTables through PHP or plain txt file. But my server has a strict restriction where I generate random HTML file and its json data to be embedded on the html page itself.

I have aready tried:

I want to create links in record fields in DataTables from JSON data

and

How to create JSON data in JS

Since, I need to put convert the remote datasource into inline datasource in single HTML file, how can this be done. I have no issues with inline HTML added.

I wish to replicate the following:

http://datatables.net/examples/server_side/row_details.html

with inline json data

<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>

Improve this question
2
  • How precisely do you want to load the content and initialise the dataTable? (== show some code :) Commented Sep 22, 2015 at 7:22
  • I'm basically creating the run-time delphi library which would create dynamic htyml page. This html-page would contain the embedded json data. I cannot break a simple html page into CSS and JS dependencies. I would club everything in one page, because my data would anyways be less than 1 MB. Please see: datatables.net/examples/server_side/row_details.html Commented Sep 22, 2015 at 7:47

1 Answer 1

Reset to default
4

Extract the content of <script id="data>..</script> and convert it to JSON :

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

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

works here -> http://jsfiddle.net/rvwe28pq/ (updated)

Update : Have updated the fiddle so it now works with your code producing child rows too. That should be it. NB: live() is deprecated, use on() instead.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I also checked jsfiddle.net/timtate/3XbGd and thought if we can also give user chance to upload the file together with option to embedd the JSON data. Your solution made my day :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.