Basic jQuery

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
     <link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js" data-semver="1.9.4" data-require="datatables@*"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>

    <table width="100%" class="display" id="example">
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            02/03/2014
          </td>
          <td>5</td>
        </tr>
        <tr>
          <td>
            02/04/2014
          </td>
          <td>4</td>
        </tr>
        <tr>
          <td>
             02/05/2014
          </td>
          <td>2</td>
        </tr>
        <tr>
          <td>
            02/06/2014
          </td>
          <td>17</td>
        </tr>
        <tr>
          <td>
            02/07/2014
          </td>
          <td>10</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

/* Formating function for row details */
function fnFormatDetails(oTable, nTr) {
  var aData = oTable.fnGetData(nTr);
  var sOut = '<table class="subtable" style="width:100%">';
  sOut += '<thead>';
  sOut += '<tr>';
  sOut += '<th>Blah</th>';
  sOut += '<th>Blub</th>';
  sOut += '<th>Nerf</th>';
  sOut += '</tr>';
  sOut += '</thead>';
  sOut += '<tbody>';
  sOut += '<tr>';
  sOut += '<td>1</td>';
  sOut += '<td>2</td>';
  sOut += '<td>3</td>';
  sOut += '</tr>';
  sOut += '<tr>';
  sOut += '<td>4</td>';
  sOut += '<td>5</td>';
  sOut += '<td>6</td>';
  sOut += '</tr>';
  sOut += '<tr>';
  sOut += '<td>7</td>';
  sOut += '<td>8</td>';
  sOut += '<td>9</td>';
  sOut += '</tr>';
  sOut += '</tbody>';
  sOut += '</table>';

  return sOut;
}

$(function() {
  /*
   * Insert a 'details' column to the table
   */
  var nCloneTh = document.createElement('th');
  var nCloneTd = document.createElement('td');
  nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">';
  nCloneTd.className = "center";

  $('#example thead tr').each(function() {
    this.insertBefore(nCloneTh, this.childNodes[0]);
  });

  $('#example tbody tr').each(function() {
    this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
  });

  /*
   * Initialse DataTables, with no sorting on the 'details' column
   */
  var oTable = $('#example').dataTable();
  /* Add event listener for opening and closing details
   * Note that the indicator for showing which row is open is not controlled by DataTables,
   * rather it is done here
   */
  $('#example tbody td img').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";
      oTable.fnClose(nTr);
    } else {
      /* Open this row */
      this.src = "../examples_support/details_close.png";
      oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
      var stable = $('.subtable').dataTable({
        "bFilter": false,
        "bInfo": false,
        "bPaginate": false,
        //reqired to show mutiple subtables at once
        "bRetrieve": true
      });


    }
  });
});

/* Put your css in here */

h1 {
  color: red;
}