title: How to Create Inline Embedded Json Data in Datatables
body: <p>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.</p>
  
  <p>I have aready tried:</p>
  
  <p><a href="https://stackoverflow.com/questions/3748262/i-want-to-create-links-in-record-fields-in-datatables-from-json-data">I want to create links in record fields in DataTables from JSON data</a></p>
  
  <p>and </p>
  
  <p><a href="https://stackoverflow.com/questions/29149556/how-to-create-json-data-in-js">How to create JSON data in JS</a></p>
  
  <p>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.</p>
  
  <p>I wish to replicate the following:</p>
  
  <p><a href="http://datatables.net/examples/server_side/row_details.html" rel="nofollow noreferrer">http://datatables.net/examples/server_side/row_details.html</a></p>
  
  <p>with inline json data</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript" language="javascript" src="../../media/js/jquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
    &lt;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"&gt;&lt;/script&gt;
    &lt;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"&gt;&lt;/script&gt; 
    
    
    
  &lt;script id="data" type="application/json"&gt;
      {
          "sEcho": 1,
    "iTotalRecords": "57",
    "iTotalDisplayRecords": "57",
    "aaData": [
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Other browsers",
        "2": "All others",
        "3": "-",
        "4": "-",
        "5": "U",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Trident",
        "2": "AOL browser (AOL desktop)",
        "3": "Win XP",
        "4": "6",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Camino 1.0",
        "3": "OSX.2+",
        "4": "1.8",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Camino 1.5",
        "3": "OSX.3+",
        "4": "1.8",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Misc",
        "2": "Dillo 0.8",
        "3": "Embedded devices",
        "4": "-",
        "5": "X",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Epiphany 2.20",
        "3": "Gnome",
        "4": "1.8",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Firefox 1.0",
        "3": "Win 98+ / OSX.2+",
        "4": "1.7",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Firefox 1.5",
        "3": "Win 98+ / OSX.2+",
        "4": "1.8",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Firefox 2.0",
        "3": "Win 98+ / OSX.2+",
        "4": "1.8",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Firefox 3.0",
        "3": "Win 2k+ / OSX.3+",
        "4": "1.9",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Misc",
        "2": "IE Mobile",
        "3": "Windows Mobile 6",
        "4": "-",
        "5": "C",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Trident",
        "2": "Internet Explorer 4.0",
        "3": "Win 95+",
        "4": "4",
        "5": "X",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Tasman",
        "2": "Internet Explorer 4.5",
        "3": "Mac OS 8-9",
        "4": "-",
        "5": "X",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Trident",
        "2": "Internet Explorer 5.0",
        "3": "Win 95+",
        "4": "5",
        "5": "C",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Tasman",
        "2": "Internet Explorer 5.1",
        "3": "Mac OS 7.6-9",
        "4": "1",
        "5": "C",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Tasman",
        "2": "Internet Explorer 5.2",
        "3": "Mac OS 8-X",
        "4": "1",
        "5": "C",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Trident",
        "2": "Internet Explorer 5.5",
        "3": "Win 95+",
        "4": "5.5",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Trident",
        "2": "Internet Explorer 6",
        "3": "Win 98+",
        "4": "6",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Trident",
        "2": "Internet Explorer 7",
        "3": "Win XP SP2+",
        "4": "7",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Webkit",
        "2": "iPod Touch / iPhone",
        "3": "iPod",
        "4": "420.1",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "KHTML",
        "2": "Konqureror 3.1",
        "3": "KDE 3.1",
        "4": "3.1",
        "5": "C",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "KHTML",
        "2": "Konqureror 3.3",
        "3": "KDE 3.3",
        "4": "3.3",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "KHTML",
        "2": "Konqureror 3.5",
        "3": "KDE 3.5",
        "4": "3.5",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Misc",
        "2": "Links",
        "3": "Text only",
        "4": "-",
        "5": "X",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Misc",
        "2": "Lynx",
        "3": "Text only",
        "4": "-",
        "5": "X",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Mozilla 1.0",
        "3": "Win 95+ / OSX.1+",
        "4": "1",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Mozilla 1.1",
        "3": "Win 95+ / OSX.1+",
        "4": "1.1",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Mozilla 1.2",
        "3": "Win 95+ / OSX.1+",
        "4": "1.2",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Mozilla 1.3",
        "3": "Win 95+ / OSX.1+",
        "4": "1.3",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Mozilla 1.4",
        "3": "Win 95+ / OSX.1+",
        "4": "1.4",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Mozilla 1.5",
        "3": "Win 95+ / OSX.1+",
        "4": "1.5",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Mozilla 1.6",
        "3": "Win 95+ / OSX.1+",
        "4": "1.6",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Mozilla 1.7",
        "3": "Win 98+ / OSX.1+",
        "4": "1.7",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Mozilla 1.8",
        "3": "Win 98+ / OSX.1+",
        "4": "1.8",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Misc",
        "2": "NetFront 3.1",
        "3": "Embedded devices",
        "4": "-",
        "5": "C",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Misc",
        "2": "NetFront 3.4",
        "3": "Embedded devices",
        "4": "-",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Netscape 7.2",
        "3": "Win 95+ / Mac OS 8.6-9.2",
        "4": "1.7",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Netscape Browser 8",
        "3": "Win 98SE+",
        "4": "1.7",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Netscape Navigator 9",
        "3": "Win 98+ / OSX.2+",
        "4": "1.8",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Presto",
        "2": "Nintendo DS browser",
        "3": "Nintendo DS",
        "4": "8.5",
        "5": "C/A&lt;sup&gt;1&lt;/sup&gt;",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Presto",
        "2": "Nokia N800",
        "3": "N800",
        "4": "-",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Webkit",
        "2": "OmniWeb 5.5",
        "3": "OSX.4+",
        "4": "420",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Presto",
        "2": "Opera 7.0",
        "3": "Win 95+ / OSX.1+",
        "4": "-",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Presto",
        "2": "Opera 7.5",
        "3": "Win 95+ / OSX.2+",
        "4": "-",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Presto",
        "2": "Opera 8.0",
        "3": "Win 95+ / OSX.2+",
        "4": "-",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Presto",
        "2": "Opera 8.5",
        "3": "Win 95+ / OSX.2+",
        "4": "-",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Presto",
        "2": "Opera 9.0",
        "3": "Win 95+ / OSX.3+",
        "4": "-",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Presto",
        "2": "Opera 9.2",
        "3": "Win 88+ / OSX.3+",
        "4": "-",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Presto",
        "2": "Opera 9.5",
        "3": "Win 88+ / OSX.3+",
        "4": "-",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Presto",
        "2": "Opera for Wii",
        "3": "Wii",
        "4": "-",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Misc",
        "2": "PSP browser",
        "3": "PSP",
        "4": "-",
        "5": "C",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Webkit",
        "2": "S60",
        "3": "S60",
        "4": "413",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Webkit",
        "2": "Safari 1.2",
        "3": "OSX.3",
        "4": "125.5",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Webkit",
        "2": "Safari 1.3",
        "3": "OSX.3",
        "4": "312.8",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Webkit",
        "2": "Safari 2.0",
        "3": "OSX.4+",
        "4": "419.3",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Webkit",
        "2": "Safari 3.0",
        "3": "OSX.4+",
        "4": "522.1",
        "5": "A",
        "extra": "hrmll"
      },
      {
        "0": "&lt;img src='details_open.png'&gt;",
        "1": "Gecko",
        "2": "Seamonkey 1.1",
        "3": "Win 98+ / OSX.2+",
        "4": "1.8",
        "5": "A",
        "extra": "hrmll"
      }
    ]
  }
  &lt;/script&gt;   
    
    &lt;script type="text/javascript" charset="utf-8"&gt;
  
    
  
  
  
  var oTable;
   
  /* Formating function for row details */
  function fnFormatDetails ( nTr )
  {
      var aData = oTable.fnGetData( nTr );
      var sOut = '&lt;table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"&gt;';
      sOut += '&lt;tr&gt;&lt;td&gt;Rendering engine:&lt;/td&gt;&lt;td&gt;'+aData[2]+' '+aData[5]+'&lt;/td&gt;&lt;/tr&gt;';
      sOut += '&lt;tr&gt;&lt;td&gt;Link to source:&lt;/td&gt;&lt;td&gt;Could provide a link here&lt;/td&gt;&lt;/tr&gt;';
      sOut += '&lt;tr&gt;&lt;td&gt;Extra info:&lt;/td&gt;&lt;td&gt;And any further details here (images etc)&lt;/td&gt;&lt;/tr&gt;';
      sOut += '&lt;/table&gt;';
       
      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 &gt; 0 ) {
         $(table).dataTable().fnAdjustColumnSizing();
        }
       }
      } );
      
  */
  /** **/
  
      oTable = $('#example').dataTable( {
          "bProcessing": true,
  //     "sScrollY": "200px",
  //     "bScrollCollapse": true,
       "bPaginate": true,
              "sPaginationType": "full_numbers",
       "bJQueryUI": true,
  //      "sDom": '&lt;"top"iflp&lt;"clear"&gt;&gt;rt&lt;"bottom"iflp&lt;"clear"&gt;&gt;',
  //      "sDom": 'RC&lt;"clear"&gt;lfrtip',
       "sDom": 'T&lt;"clear"&gt;lfrtip&lt;"clear spacer"&gt;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');
      } );
  */
  /****  ****/
  
  
  
  } );
  
  
  
  
  
  
  
  
  
    &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  &lt;style type="text/css" title="currentStyle"&gt;
     @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 },
  
    &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body id="dt_example" class="ex_highlight"&gt;
    &lt;div id="container"&gt;
     &lt;div class="full_width big"&gt;
      DataTables server-side processing example with hidden row information
     &lt;/div&gt;
     
     &lt;h1&gt;Preamble&lt;/h1&gt;
     &lt;p&gt;This example shows how you might modify the client-side show/hide details rows example for use with DataTables server-side processing option.&lt;/p&gt;
     
     &lt;h1&gt;Live example&lt;/h1&gt;
     &lt;div id="dynamic"&gt;
  &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;
   &lt;thead&gt;
    &lt;tr&gt;
     &lt;th width="4%"&gt;&lt;/th&gt;
     &lt;th width="25%"&gt;Rendering engine&lt;/th&gt;
     &lt;th width="20%"&gt;Browser&lt;/th&gt;
     &lt;th width="25%"&gt;Platform(s)&lt;/th&gt;
     &lt;th width="16%"&gt;Engine version&lt;/th&gt;
     &lt;th width="10%"&gt;CSS grade&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
    &lt;tr&gt;
     &lt;td colspan="5" class="dataTables_empty"&gt;Loading data from server&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
   &lt;tfoot&gt;
    &lt;tr&gt;
     &lt;th&gt;&lt;/th&gt;
     &lt;th&gt;Rendering engine&lt;/th&gt;
     &lt;th&gt;Browser&lt;/th&gt;
     &lt;th&gt;Platform(s)&lt;/th&gt;
     &lt;th&gt;Engine version&lt;/th&gt;
     &lt;th&gt;CSS grade&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/tfoot&gt;
  &lt;/table&gt;
     &lt;/div&gt;
     
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>